/* SAHNE · ÜNVANA GÖRE YETKİ (includes/scenes/permissions.php) — adımlar:
   s1 «Modül veya yetki ara…» kutusuna «revir» → yalnız Revir / Sağlık, ayrıntı açık · s2 sayfa kayar, «Yönet» → 5 yetki,
   özel nitelikli satır boş · s3 özel satır elle işaretlenir → «+1 özel nitelikli» · s4 «Yetkileri Kaydet» → sayfa yenilenir,
   «Ünvan yetkileri kaydedildi.» · s5 «Açık» süzgeci → Revir / Sağlık (Yönet) · s6 Önizleme: 3 ekran */
@property --prm-y { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --prm-m { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --prm-o { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --prm-k { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --prm-f { syntax: '<integer>'; inherits: false; initial-value: 0; }

.prm { container-type: inline-size; --d: 0s; --prm-h: 480px; --prm-rh: 58px; --prm-sc2: 62px; --prm-sc3: 62px; --prm-sc6: 62px;
  --prm-ok: #047857; --prm-ok-ink: #065f46; --prm-amb: #92400e; --prm-spring: cubic-bezier(.34, 1.56, .64, 1); }
.prm.s1 { --d: .95s; } .prm.s2 { --d: .5s; } .prm.s3 { --d: .55s; } .prm.s4 { --d: .7s; } .prm.s5 { --d: .5s; } .prm.s6 { --d: .45s; }
.prm-win { position: relative; display: flex; flex-direction: column; height: var(--prm-h); }
.prm-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ı hücrede; on-A-B = A. adımdan B. adıma kadar görünür */
.prm-x { display: grid; min-width: 0; }
.prm-x > * { grid-area: 1 / 1; min-width: 0; }
.prm [class*=" on-"] { opacity: 0; transform: translateY(3px); transition: opacity .3s var(--ui-ease) var(--d), transform .35s var(--ui-ease) var(--d); }
.prm:not(.s1) .on-0-1, .prm:not(.s2) .on-0-2, .prm:not(.s4) .on-0-4, .prm.s1:not(.s4) .on-1-4, .prm.s2:not(.s4) .on-2-4,
.prm.s4 .on-4, .prm.s4 .on-4b { opacity: 1; transform: none; }
.prm.s4 .prm-ara__v [class*=" on-"] { transition-delay: .7s; }
/* s4 kayıt = sayfa yenilenir: eski durum solarak kalmaz — uyarı, «revir», değişiklik kutusu ve açık kart .7 sn'de bir anda
   kalkar (gerçekte yenilenen sayfada yoklar; «kaydedildi» ile «kaydedilmedi» aynı anda okunmaz, yazılar üst üste binmez) */
.prm.s4 .prm-warn { transition: none; }
.prm.s4 .prm-ty, .prm.s4 .prm-fark { transition: opacity 0s linear .7s, transform 0s linear .7s; }
.prm.s4 .prm-l2 { transition: opacity 0s linear .7s, translate 0s linear .7s; }

/* imleç: .prm-hit tıklama noktası; ok ucu tam orada, halka dalgası çevresinde */
.prm-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.prm-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.prm-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 prm-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 34% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 62% { scale: 1; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes prm-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes prm-push { 50% { scale: .94; } }
@keyframes prm-pop { 0% { scale: .3; } 60% { scale: 1.18; } 100% { scale: 1; } }
@keyframes prm-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes prm-type { 0% { max-width: 0; } 20% { max-width: 5px; } 40% { max-width: 12px; } 60% { max-width: 18.5px; } 80% { max-width: 21.5px; } 100% { max-width: 40px; } }

/* ── başlık bandı (kurum rengi) ── */
.prm-band { position: relative; z-index: 5; flex: none; display: flex; align-items: center; gap: 10px; height: 46px; margin: 8px 8px 0; padding: 0 10px 0 8px; 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); }
.prm-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.prm-ico .prm-i { width: 17px; height: 17px; stroke-width: 1.8; }
.prm-ttl { flex: 1; min-width: 0; }
.prm-ttl > b { display: block; font-size: 14.5px; line-height: 18px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.prm-ttl small { display: flex; align-items: center; gap: 6px; margin-top: 2px; height: 16px; }
.prm-ttl code { padding: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, .14); font: 600 10.5px/16px ui-monospace, "SFMono-Regular", Consolas, monospace; color: rgba(255, 255, 255, .9); }
.prm-chip { display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 6px; border-radius: 99px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); font-size: 10px; font-weight: 800; line-height: 16px; }
.prm-chip .prm-i { width: 10px; height: 10px; }
.prm-help { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.prm-help .prm-i { width: 15px; height: 15px; }

/* ── uyarı ↔ kaydedildi ── */
.prm-al { flex: none; height: 34px; margin: 8px 12px 0; --prm-ah: 34px; transition: margin-top .45s var(--ui-ease), opacity .3s var(--ui-ease); }
/* sayfa kayınca uyarı (sayfa akışında, araç çubuğunun üstünde) bandın altına kayıp gider; yapışkan çubuk yukarı oturur */
.prm.s2 .prm-al { margin-top: calc(-1 * var(--prm-ah)); opacity: 0; }
.prm.s4 .prm-al { margin-top: 8px; opacity: 1; transition: margin-top 0s linear .7s, opacity .25s var(--ui-ease) .7s; }
.prm-warn { display: flex; align-items: center; gap: 9px; padding: 0 10px 0 5px; border-radius: 10px; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; }
.prm-warn__ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #f59e0b; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.prm-warn__ico .prm-i { width: 14px; height: 14px; }
.prm-warn__t { min-width: 0; line-height: 14px; color: #78350f; }
.prm-warn__t b { display: block; font-size: 11.5px; font-weight: 800; }
.prm-warn__t span { display: block; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.prm-ok { display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0; font-size: 12px; font-weight: 800; color: var(--prm-ok); }

/* ── yapışkan araç çubuğu ── */
.prm-tb { flex: none; margin: 8px 12px 0; padding-bottom: 8px; box-shadow: inset 0 -1px 0 var(--ui-line); }
.prm-tb__r1 { display: flex; align-items: center; gap: 8px; height: 28px; }
.prm-cnts { flex: none; display: flex; gap: 5px; }
.prm-c { display: inline-block; height: 20px; line-height: 20px; padding: 0 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prm-c--y { background: #e6eef8; color: var(--navy-soft); }
.prm-c--m { background: #f4f4f5; color: #3f3f46; }
.prm-c--o { background: #fef3c7; color: var(--prm-amb); }
.prm-n { font-variant-numeric: tabular-nums; }
.prm-n--y { counter-reset: py var(--prm-y); transition: --prm-y .55s var(--ui-ease) .95s; }
.prm-n--m { counter-reset: pm var(--prm-m); transition: --prm-m .3s var(--ui-ease) .95s; }
.prm-n--o { counter-reset: po var(--prm-o); transition: --prm-o .3s var(--ui-ease) .85s; }
.prm-n--k { counter-reset: pk var(--prm-k); transition: --prm-k .55s var(--ui-ease) .95s; }
.prm-n--f { counter-reset: pf var(--prm-f); transition: --prm-f .55s var(--ui-ease) .95s; }
.prm-n--y::after { content: counter(py); } .prm-n--m::after { content: counter(pm); } .prm-n--o::after { content: counter(po); }
.prm-n--k::after { content: counter(pk); } .prm-n--f::after { content: counter(pf); }
.prm.s2 .prm-n--y, .prm.s2 .prm-n--k, .prm.s2 .prm-n--f { --prm-y: 5; --prm-k: 5; --prm-f: 5; }
.prm.s3 .prm-n--y, .prm.s3 .prm-n--k, .prm.s3 .prm-n--f { --prm-y: 6; --prm-k: 6; --prm-f: 6; transition-duration: .2s; transition-delay: .85s; }
/* değişiklik kutusu uygulamada değişiklik yokken gizli: «+0» hiç görünmez, kutu son sayıyla belirir */
.prm.s2:not(.s3) .prm-n--f { transition: none; }
.prm.s2 .prm-n--m { --prm-m: 1; }
.prm.s3 .prm-n--o { --prm-o: 1; }
.prm.s4 .prm-n--y, .prm.s4 .prm-n--o, .prm.s4 .prm-n--m { transition: none; }

.prm-ara { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px; border-radius: 8px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-line-2), 0 1px 1px rgba(16, 37, 64, .03); transition: box-shadow .25s var(--ui-ease); }
.prm-ara > .prm-i { width: 13px; height: 13px; color: #a1a1aa; }
.prm-ara__v { flex: 1; font-size: 11.5px; line-height: 16px; }
.prm-ph { font-weight: 500; color: #8a8f99; white-space: nowrap; }
.prm-ty { display: flex; align-items: center; font-weight: 800; color: #18181b; white-space: nowrap; }
.prm-ty__t { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; transition: max-width 0s linear .62s; }
.prm.s1 .prm-ty__t { max-width: 40px; }
/* harf harf: genişlikler «r · re · rev · revi» ön eklerinin ölçülen eni (11,5 px 800) — yarım harf görünmez */
.prm.s1:not(.s2) .prm-ty__t { animation: prm-type .42s steps(1, end) .5s both; }
/* yazma görünür: tıklamayla (.5 sn) imleç kutuda yanıp söner, ilk harfle (.584 sn) yer tutucu kalkar — yazı yer tutucuyla binmez */
.prm.s1:not(.s2) .prm-ty { transition: opacity 0s linear .5s, transform 0s linear .5s; }
.prm.s1:not(.s2) .prm-ph.on-0-1 { transition: opacity 0s linear .584s, transform 0s linear .584s; }
.prm-caret { display: block; width: 1.5px; height: 14px; margin-left: 1px; border-radius: 1px; background: var(--navy-soft); }
.prm.s1:not(.s2) .prm-caret { animation: prm-blink 1s steps(1) infinite; }
.prm.s2 .prm-caret { opacity: 0; }
.prm.s1:not(.s2) .prm-ara { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); }
.prm-ara .prm-hit { left: 72px; top: 16px; }
.prm.s1:not(.s2) .prm-hit--ara .ui-cur { animation: prm-cur 1.1s var(--ui-ease) both; }
.prm.s1:not(.s2) .prm-hit--ara .prm-rip { animation: prm-rip .55s ease-out .5s both; }

.prm-tb__r2 { display: flex; align-items: center; gap: 10px; height: 24px; margin-top: 6px; }
.prm-flt { flex: none; display: flex; gap: 4px; }
.prm-fc { position: relative; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 99px; background: #fff; font-size: 10.5px; font-weight: 800; color: #52525b; white-space: nowrap;
  box-shadow: inset 0 0 0 1px #e4e4e7; transition: background-color .25s var(--ui-ease) var(--d), color .25s var(--ui-ease) var(--d), box-shadow .25s var(--ui-ease) var(--d); }
.prm:not(.s5) .prm-fc--tumu { background: var(--navy-soft); color: #fff; box-shadow: inset 0 0 0 1px var(--navy-soft); }
/* uygulamada «Açık/Kapalı/Özel nitelikli» data-seviye="kapali" taşır: basılıyken koyu çinko (#3f3f46) */
.prm.s5 .prm-fc--acik { background: #3f3f46; color: #fff; box-shadow: inset 0 0 0 1px #3f3f46; }
.prm-fc--acik .prm-hit { left: 62%; top: 15px; }
.prm.s5:not(.s6) .prm-hit--acik .ui-cur { animation: prm-cur .95s var(--ui-ease) both; }
.prm.s5:not(.s6) .prm-hit--acik .prm-rip { animation: prm-rip .55s ease-out .45s both; }
.prm.s5:not(.s6) .prm-fc--acik { animation: prm-push .3s var(--ui-ease) .44s; }
.prm-r2x { flex: 1; justify-items: end; }
.prm-tools { display: flex; gap: 6px; }
.prm-sel, .prm-tl { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 10.5px; font-weight: 800; color: #3f3f46; white-space: nowrap; }
.prm-sel { background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7; }
.prm-sel .prm-i { width: 12px; height: 12px; color: #71717a; }
.prm-sel .prm-chev { width: 11px; height: 11px; }
.prm-tl { background: #f4f4f5; }
.prm-fark { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 3px 0 10px; border-radius: 8px; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; font-size: 10.5px; font-weight: 700; color: #78350f; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prm-fark b { font-weight: 800; }
.prm-geri { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #fcd34d; font-size: 10px; font-weight: 800; color: var(--prm-amb); }
.prm.s2:not(.s4) .prm-fark { transition-delay: .95s; }

/* ── sayfa gövdesi ── */
.prm-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.prm-body::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); pointer-events: none; transition: opacity .3s var(--ui-ease) var(--d); }
.prm.s6 .prm-body::after { opacity: 0; transition-delay: .45s; }
.prm-pg { padding: 6px 12px 0; transition: translate .5s var(--ui-ease); }
.prm.s2 .prm-pg { translate: 0 calc(-1 * var(--prm-sc2)); }
.prm.s3 .prm-pg { translate: 0 calc(-1 * var(--prm-sc3)); }
.prm.s4 .prm-pg { translate: 0 0; transition: translate 0s linear .7s; }
.prm.s6 .prm-pg { translate: 0 calc(-1 * var(--prm-sc6)); transition: translate .5s var(--ui-ease); }

.prm-rule { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: var(--prm-rh); padding: 0 10px; border-radius: 10px; background: #f6f7f9; font-size: 10.5px; font-weight: 700; line-height: 14px; color: #52525b; }
.prm-rule b { font-weight: 800; color: #3f3f46; }
.prm-rule__oz { display: block; color: var(--prm-amb); }
.prm-rule__oz b { color: var(--prm-amb); }
.prm-rule__oz .prm-i { display: inline-block; width: 11px; height: 11px; margin: 0 3px -1px 0; vertical-align: baseline; }
.prm-rule__oz > span { display: inline; }

.prm-lay { margin-top: 6px; }
.prm-lay > * { display: flex; flex-direction: column; gap: 8px; transition: opacity .3s var(--ui-ease) var(--d), translate .4s var(--ui-ease) var(--d); }
.prm-l2, .prm-l3 { opacity: 0; translate: 0 8px; }
.prm.s1 .prm-l1 { opacity: 0; translate: 0 -6px; }
.prm.s1:not(.s4) .prm-l2 { opacity: 1; translate: 0 0; }
.prm.s4 .prm-l1 { opacity: 1; translate: 0 0; }
.prm.s5 .prm-l1 { opacity: 0; translate: 0 -6px; }
.prm.s5 .prm-l3 { opacity: 1; translate: 0 0; }
/* süzme anlık: giden kart listesi çabuk söner, gelen ondan sonra belirir — iki listenin yazıları üst üste binmez */
.prm.s1:not(.s4) .prm-l1, .prm.s5 .prm-l1 { transition: opacity .14s var(--ui-ease) var(--d), translate .14s var(--ui-ease) var(--d); }
.prm.s1:not(.s4) .prm-l2, .prm.s5 .prm-l3 { transition: opacity .3s var(--ui-ease) calc(var(--d) + .12s), translate .4s var(--ui-ease) calc(var(--d) + .12s); }

/* modül kartı */
.prm-card { position: relative; padding: 9px 10px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: box-shadow .3s var(--ui-ease) .85s, background-color .3s var(--ui-ease) .85s; }
.prm-card--off { background: #fafafa; }
.prm-card--rv { background: #fafafa; }
.prm.s2 .prm-card--rv, .prm-card--on { background: #fff; box-shadow: 0 0 0 1px #b9cde6, 0 1px 2px rgba(16, 37, 64, .05), 0 8px 18px -12px rgba(29, 79, 134, .35); }
.prm-ch { display: flex; align-items: flex-start; gap: 8px; }
.prm-mi { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #f4f4f5; color: #52525b; }
.prm-mi .prm-i { width: 15px; height: 15px; stroke-width: 1.9; }
.prm-ct { flex: 1; min-width: 0; }
.prm-ct > b { display: block; font-size: 12.5px; line-height: 16px; font-weight: 800; color: #18181b; white-space: nowrap; }
.prm-ct small { display: flex; align-items: center; gap: 5px; font-size: 10.5px; line-height: 14px; font-weight: 700; color: #71717a; font-variant-numeric: tabular-nums; }
.prm-ct small.prm-kim { display: block; }
.prm-kim em { font-style: normal; color: var(--navy-soft); }
.prm-oz, .prm-oz2 { display: inline-flex; align-items: center; height: 15px; padding: 0 6px; border-radius: 99px; background: #fef3c7; color: var(--prm-amb); font-style: normal; font-size: 10px; font-weight: 800; white-space: nowrap; }
.prm-oz { opacity: 0; scale: .4; transition: opacity .2s var(--ui-ease) .85s, scale .4s var(--prm-spring) .85s; }
.prm.s3 .prm-oz { opacity: 1; scale: 1; }

.prm-lv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.prm-lvb { position: relative; display: grid; place-items: center; height: 28px; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 800; color: #52525b;
  box-shadow: inset 0 0 0 1px #e4e4e7; transition: background-color .25s var(--ui-ease) .82s, color .25s var(--ui-ease) .82s, box-shadow .25s var(--ui-ease) .82s; }
.prm-lvb.is-k, .prm:not(.s2) .prm-lvb--k { background: #3f3f46; color: #fff; box-shadow: inset 0 0 0 1px #3f3f46; }
.prm-lvb.is-y, .prm.s2 .prm-lvb--y { background: var(--navy-soft); color: #fff; box-shadow: inset 0 0 0 1px var(--navy-soft), inset 0 1px 0 rgba(255, 255, 255, .14); }
.prm-lvb--y .prm-hit { left: 55%; top: 17px; }
.prm.s2:not(.s3) .prm-hit--yon .ui-cur { animation: prm-cur 1.05s var(--ui-ease) .27s both; }
.prm.s2:not(.s3) .prm-hit--yon .prm-rip { animation: prm-rip .55s ease-out .8s both; }
.prm.s2:not(.s3) .prm-lvb--y { animation: prm-push .3s var(--ui-ease) .78s; }

.prm-sum { display: flex; align-items: center; gap: 3px; margin-top: 7px; height: 14px; font-size: 10.5px; font-weight: 800; color: #71717a; }
.prm-sum .prm-i { width: 11px; height: 11px; stroke-width: 2.4; }
.prm-sum.is-open .prm-i { rotate: 90deg; }

/* ayrıntı: yetki satırları */
.prm-det { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e4e4e7; }
.prm-row { display: grid; grid-template-columns: 15px minmax(0, 1fr); column-gap: 8px; align-items: start; padding: 3px 4px; border-radius: 6px; font-size: 11px; line-height: 14px; font-weight: 700; color: #3f3f46; }
.prm-row--oz { background: #fffbeb; box-shadow: inset 0 0 0 1px #fdecc0; padding: 4px; }
.prm-row__t { min-width: 0; }
.prm-rz { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 1px 7px 1px 5px; border-radius: 99px; background: #fef3c7; color: var(--prm-amb); font-style: normal; font-size: 10px; line-height: 13px; font-weight: 800; }
.prm-rz .prm-i { width: 10px; height: 10px; stroke-width: 2.2; }
.prm-row--oz .prm-row__t { display: flex; flex-direction: column; align-items: flex-start; }
.prm-cb { position: relative; display: grid; place-items: center; width: 15px; height: 15px; margin-top: -1px; border-radius: 4px; background: #fff; color: #fff;
  box-shadow: inset 0 0 0 1.5px #a1a1aa; transition: background-color .2s var(--ui-ease) calc(.9s + var(--i) * 85ms), box-shadow .2s var(--ui-ease) calc(.9s + var(--i) * 85ms); }
.prm-cb .prm-i { width: 11px; height: 11px; stroke-width: 3; scale: 0; transition: scale .35s var(--prm-spring) calc(.9s + var(--i) * 85ms); }
.prm.s2 .prm-row:not(.prm-row--oz) .prm-cb, .prm.s3 .prm-row--oz .prm-cb { background: var(--navy-soft); box-shadow: inset 0 0 0 1.5px var(--navy-soft); }
.prm.s2 .prm-row:not(.prm-row--oz) .prm-cb .prm-i, .prm.s3 .prm-row--oz .prm-cb .prm-i { scale: 1; }
.prm-row--oz .prm-cb { box-shadow: inset 0 0 0 1.5px #d97706; }
.prm.s3 .prm-row--oz .prm-cb, .prm.s3 .prm-row--oz .prm-cb .prm-i { transition-delay: .78s; }
.prm-cb .prm-hit { left: 8px; top: 9px; }
.prm.s3:not(.s4) .prm-hit--oz .ui-cur { animation: prm-cur 1s var(--ui-ease) .28s both; }
.prm.s3:not(.s4) .prm-hit--oz .prm-rip { animation: prm-rip .55s ease-out .76s both; }

/* önizleme */
.prm-onz { border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.prm-onz__h { position: relative; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; }
.prm-onz__h > .prm-i { width: 14px; height: 14px; color: #71717a; }
.prm-onz__h b { min-width: 0; font-size: 11.5px; font-weight: 800; color: #18181b; white-space: nowrap; }
.prm-l2 .prm-onz__n { display: grid; }
.prm-l2 .prm-onz__n > * { grid-area: 1 / 1; transition: opacity .25s var(--ui-ease) .95s; }
.prm-l2 .prm-onz__n > :last-child, .prm.s2 .prm-l2 .prm-onz__n > :first-child { opacity: 0; }
.prm.s2 .prm-l2 .prm-onz__n > :last-child { opacity: 1; }
.prm-onz__n { flex: none; height: 18px; padding: 0 7px; border-radius: 99px; background: #f4f4f5; font-size: 10.5px; font-weight: 800; line-height: 18px; color: #52525b; }
.prm-onz__h .prm-hit { left: 120px; top: 20px; }
.prm.s6 .prm-hit--onz .ui-cur { animation: prm-cur 1s var(--ui-ease) .3s both; }
.prm.s6 .prm-hit--onz .prm-rip { animation: prm-rip .55s ease-out .78s both; }
.prm-onz__b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ui-ease) .85s; }
.prm.s6 .prm-onz__b { grid-template-rows: 1fr; }
.prm-onz__in { overflow: hidden; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; padding: 0 10px; min-height: 0; }
.prm-onz__in::after { content: ""; flex: 1 0 100%; height: 6px; }
.prm-scr { height: 20px; padding: 0 8px; border-radius: 99px; background: #f4f4f5; font-size: 10.5px; font-weight: 700; line-height: 20px; color: #3f3f46; white-space: nowrap;
  opacity: 0; scale: .7; transition: opacity .2s var(--ui-ease) calc(1.05s + var(--i) * 90ms), scale .35s var(--prm-spring) calc(1.05s + var(--i) * 90ms); }
.prm.s6 .prm-scr { opacity: 1; scale: 1; }
.prm-onz__not { flex: 1 0 100%; margin-top: 4px; font-size: 10px; font-weight: 700; line-height: 13px; color: #71717a; }

/* alt eylem çubuğu */
.prm-bar { position: relative; z-index: 4; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 42px; padding: 0 12px; background: #fff; box-shadow: 0 -1px 0 var(--ui-line), 0 -8px 16px -12px rgba(16, 37, 64, .25); }
.prm-back { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7; font-size: 11.5px; font-weight: 700; color: #3f3f46; }
.prm-save { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 9px; font-size: 11.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .2), 0 6px 14px -8px rgba(20, 61, 107, .75); }
.prm-save .prm-i { width: 14px; height: 14px; }
.prm-save .prm-hit { right: 34px; top: 18px; }
.prm.s4:not(.s5) .prm-hit--kay .ui-cur { animation: prm-cur 1s var(--ui-ease) both; }
.prm.s4:not(.s5) .prm-hit--kay .prm-rip { animation: prm-rip .55s ease-out .48s both; }
.prm.s4:not(.s5) .prm-save { animation: prm-push .3s var(--ui-ease) .46s; }

/* ── DAR KAPLAR ── */
@container (max-width: 600px) {
  .prm-tools { display: none; }
  .prm-tb__r2 { display: grid; }
  .prm-flt, .prm-r2x { grid-area: 1 / 1; }
  .prm-r2x { justify-items: stretch; }
  .prm-fark { justify-content: space-between; }
  .prm-flt { transition: opacity .3s var(--ui-ease) var(--d); }
  /* süzgeç çipleri «Yönet» basışından hemen sonra (.8 sn) çabuk kalkar, değişiklik kutusu .95 sn'de gelir: iki yazı üst üste binmez */
  .prm.s2:not(.s4) .prm-flt { opacity: 0; transition: opacity .15s var(--ui-ease) .8s; }
  .prm-onz__h b { white-space: normal; line-height: 14px; }
}
@container (max-width: 470px) {
  /* s2: özel nitelikli satır (boş kalan) rozetiyle birlikte gövdenin içinde, «Yönet» araç çubuğunun altında görünür; s3 aynı yerde
     kalır (tek odak: elle işaretleme). «Kimin kayıtları:» iki satır → kart başlığı her dar genişlikte aynı boy; kayış o iki
     satırı tam araç çubuğunun altına sokar (gövdenin üst kenarında yarım satır kalmaz) */
  .prm-win { --prm-rh: 86px; --prm-sc2: 170px; --prm-sc3: 170px; --prm-sc6: 94px; }
  /* s2–s3: altta kalan önizleme kartının başlık yazısı gövdenin solma şeridinde yarım görünmesin (yalnız kenar çizgisi sezilir) */
  .prm-lay > .prm-l2 { gap: 16px; }
  .prm-kim em { display: block; }
  .prm-band { margin: 8px 8px 0; height: 44px; }
  .prm-ico, .prm-help { display: none; }
  .prm-ttl { padding-left: 4px; }
  .prm-ttl > b { font-size: 14px; }
  .prm-al { height: 30px; margin: 8px 10px 0; --prm-ah: 30px; }
  .prm-warn__t span { display: none; }
  .prm-warn__ico { width: 22px; height: 22px; border-radius: 6px; }
  .prm-warn__ico .prm-i { width: 12px; height: 12px; }
  .prm-ok { font-size: 11.5px; }
  .prm-tb { margin: 8px 10px 0; }
  .prm-tb__r1 { flex-wrap: wrap; row-gap: 6px; height: auto; }
  .prm-cnts { width: 100%; }
  .prm-ara { flex: 1 1 100%; }
  .prm-c { padding: 0 7px; }
  .prm-pg { padding: 8px 10px 0; }
  .prm-rule { padding: 0 9px; }
  .prm-ct > b { font-size: 12px; }
  .prm-fark { padding-left: 8px; gap: 6px; }
  .prm-fark > span:first-child { font-size: 10.5px; }
  .prm-back { display: none; }
  .prm-bar { padding: 0 10px; }
  .prm-save { flex: 1; }
  .prm-save .prm-hit { right: auto; left: 62%; }
}
@container (max-width: 399px) {
  /* ≤385 px'te satırlar kırılır, Revir kartı uzar: 16 px aralıkta önizleme başlığı solma şeridinde yarım kalıyordu. 36 px ile
     önizleme kartı gövdenin altına iner; 386–399 px'te (kısa kart) yalnız kenar çizgisi sezilir */
  .prm-lay > .prm-l2 { gap: 36px; }
}
@container (max-width: 380px) {
  .prm-c { padding: 0 6px; font-size: 10px; }
  .prm-cnts { gap: 4px; }
  .prm-fc { padding: 0 8px; }
}