/*
 * ops-pages.css — işletim sayfaları: Loglar (Son Etkinlikler, Son Kayıtlar,
 * Son Girişler, Aura Log), Mağaza (Modlar, Mod Yükle, Toplu Mod Yükle,
 * Mağazayı Yedekle), Raporlar, Veritabanı Yedekleme. Liste kalıbı (.usr),
 * pencere sistemi (.dlg) ve yükleme kiti (content-pages.css) üstüne kurulur.
 * Döngü yok; hover'da büyüme yok.
 * Tasarım: docs/design-system.md §7.47
 */

#view-logs-activity,
#view-logs-registers,
#view-logs-logins,
#view-aura-log,
#view-shop-mods,
#view-shop-upload,
#view-shop-bulk,
#view-shop-backup,
#view-reports,
#view-db-backup {
  font-family: var(--wf-font-text);
  color: var(--wf-text-1);
}
:is(#view-logs-activity, #view-logs-registers, #view-logs-logins, #view-aura-log, #view-shop-mods, #view-shop-upload, #view-shop-bulk, #view-shop-backup, #view-reports, #view-db-backup) button:focus-visible {
  outline: 2px solid rgba(244, 236, 234, 0.6);
  outline-offset: -2px;
}
.ops-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: auto; scrollbar-color: auto; }
.ops-scroll::-webkit-scrollbar { width: 12px; }
.ops-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.ops-scroll::-webkit-scrollbar-thumb { border: 4px solid transparent; border-radius: 99px; background: rgba(255, 255, 255, 0.1) padding-box; }

/* ============================================================
   [LOGLAR] güne göre satırlar · olay penceresi
   ============================================================ */
.lg { --lg-cols: 22px 46px 40px minmax(0, 1fr) minmax(130px, 210px) 84px; }
.lg.no-check { --lg-cols: 46px 40px minmax(0, 1fr) minmax(130px, 210px) 84px; }
.lg.al { --lg-cols: 46px 40px minmax(0, 1fr) 84px; }
.lg-hint { flex: 1; min-width: 240px; margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--wf-text-3); }
.usr-stat.lg-warn { background: color-mix(in srgb, var(--c) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent); }
.usr-stat.lg-warn .usr-stat-text b { color: var(--c); }
.lg-list {
  flex: 1;
  min-height: 0;
  padding: 2px 10px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: auto;
  scrollbar-color: auto;
}
.lg-list::-webkit-scrollbar { width: 12px; }
.lg-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.lg-list::-webkit-scrollbar-thumb { border: 4px solid transparent; border-radius: 99px; background: rgba(255, 255, 255, 0.1) padding-box; }
.lg-day { padding: 14px 12px 6px; font-size: 0.74rem; font-weight: 700; color: var(--wf-text-3); }
.lg-day:first-child { padding-top: 8px; }
.lg-row {
  display: grid;
  grid-template-columns: var(--lg-cols);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color var(--wf-dur-hover) ease;
}
.lg-row.is-sel { background: rgba(124, 196, 255, 0.08); }
.lg-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
  color: transparent;
  transition: background-color var(--wf-dur-hover) ease, box-shadow var(--wf-dur-hover) ease;
}
.lg-check svg { width: 12px; height: 12px; }
.lg-row.is-sel .lg-check { background: #7cc4ff; box-shadow: none; color: #0b0710; }
.lg-time { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--wf-text-3); }
.lg-who { position: relative; width: 36px; height: 36px; }
.lg-ava {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--wf-text-2);
}
.lg-ava img { width: 100%; height: 100%; object-fit: cover; }
.lg-ava.is-sys { border-radius: 11px; color: var(--wf-text-3); }
.lg-ava.is-sys svg { width: 17px; height: 17px; }
.lg-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 2px #170e12;
  color: #120a0d;
}
.lg-badge svg { width: 10px; height: 10px; stroke-width: 2.6; }
.lg-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-line { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.lg-name { flex-shrink: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--wf-text-1); cursor: pointer; }
.lg-name.is-sys { color: var(--wf-text-3); cursor: inherit; }
.lg-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 18px;
  padding: 0 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--rc) 16%, transparent);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--rc);
}
.lg-role svg,
.lg-role img { width: 10px; height: 10px; }
.lg-text { overflow: hidden; text-overflow: ellipsis; font-size: 0.86rem; color: var(--wf-text-2); }
.lg-sub { display: flex; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.76rem; color: var(--wf-text-4); }
.lg-sub > * { flex-shrink: 0; }
.lg-sub > :last-child { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.lg-sub b { font-weight: 600; color: var(--wf-text-3); }
.lg-ipx {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  max-width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font: inherit;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 0.74rem;
  color: var(--wf-text-3);
  cursor: pointer;
  transition: background-color var(--wf-dur-hover) ease, color var(--wf-dur-hover) ease;
}
.lg-ipx svg { width: 12px; height: 12px; flex-shrink: 0; }
.lg-ipx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-ipx em { flex-shrink: 0; padding: 1px 5px; border-radius: 5px; background: rgba(240, 180, 90, 0.15); font-family: var(--wf-font-text); font-style: normal; font-size: 0.66rem; font-weight: 700; color: #f6c98a; }
.lg-ipx.is-shared { box-shadow: inset 0 0 0 1px rgba(240, 180, 90, 0.3); }
.lg-ipx.is-panel { background: rgba(177, 140, 255, 0.1); font-family: var(--wf-font-text); font-weight: 600; color: #c4b0ff; cursor: default; }
.lg-ipx.is-none { background: none; cursor: default; }
.lg-ago { font-size: 0.76rem; text-align: right; white-space: nowrap; color: var(--wf-text-4); }
.lg mark { border-radius: 3px; background: rgba(124, 196, 255, 0.25); color: inherit; }
.lg-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; color: var(--wf-text-2); cursor: pointer; }
.lg-link.is-danger { color: #fda4af; }
.al-src { font-style: normal; font-weight: 600; color: var(--tone); }

/* Olay penceresi */
.lg-person { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.lg-person .lg-ava { width: 40px; height: 40px; }
.lg-person-text { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.lg-person-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; color: var(--wf-text-1); }
.lg-sub-lead { margin: 0 0 12px; }
.lg-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lg-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.lg-facts span { font-size: 0.72rem; color: var(--wf-text-4); }
.lg-facts b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 600; color: var(--wf-text-1); }
.lg-facts code { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 0.8rem; }
.lg-facts em { font-style: normal; font-size: 0.74rem; color: var(--wf-text-3); }
.lg-facts em.is-warn { color: #f6c98a; }
.lg-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); font-size: 0.82rem; }
.lg-kv span { color: var(--wf-text-4); }
.lg-kv b { font-weight: 500; overflow-wrap: anywhere; color: var(--wf-text-2); }
.lg-kv-empty { margin: 0; font-size: 0.8rem; color: var(--wf-text-4); }
.dlg-foot .lg-del { margin-right: auto; color: #fda4af; }

@media (hover: hover) and (pointer: fine) {
  .lg-row:hover { background: rgba(255, 255, 255, 0.035); }
  .lg-row.is-sel:hover { background: rgba(124, 196, 255, 0.11); }
  .lg-row:hover .lg-check { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
  .lg-name:not(.is-sys):hover { text-decoration: underline; text-underline-offset: 2px; }
  button.lg-ipx:hover { background: rgba(255, 255, 255, 0.08); color: var(--wf-text-1); }
}
@media (max-width: 760px) {
  .lg { --lg-cols: 22px 36px minmax(0, 1fr) auto; }
  .lg.no-check, .lg.al { --lg-cols: 36px minmax(0, 1fr) auto; }
  .lg-time { display: none; }
  .lg-row { gap: 4px 10px; padding: 8px; }
  .lg-row .lg-ipx { grid-row: 2; grid-column: 3 / -1; }
  .lg.no-check .lg-row .lg-ipx { grid-column: 2 / -1; }
  .lg-hint { display: none; }
  .lg-facts { grid-template-columns: minmax(0, 1fr); }
}

/* Sayfa içi formlar (Mod Yükle, Toplu Mod Yükle) */
.ops-form textarea.dlg-input { height: auto; min-height: 74px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.ops-form .dlg-input.is-error,
.dlg .dlg-input.is-error { border-color: rgba(251, 113, 133, 0.7); }

/* ============================================================
   [MAĞAZA] katalog · kart / liste · düzenleme · etiket alanı
   ============================================================ */
.shm .usr-tools { display: flex; align-items: center; gap: 8px; }
.shm-views { padding: 3px; }
.shm-views button { justify-content: center; width: 34px; padding: 0; }
.shm-views button svg { width: 15px; height: 15px; }
.shm-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.shm-cats::-webkit-scrollbar { display: none; }
.shm-cats button { flex-shrink: 0; }
.shm-dot { display: inline-block; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%; background: var(--cc); }
.shm-upd-tab svg { width: 13px; height: 13px; color: #f6a35c; }
.shm-body { flex: 1; min-height: 0; padding: 14px; }
.shm-body.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 14px; }
.shm-body.is-list { padding: 4px 10px 10px; }
.shm-skel { aspect-ratio: 232 / 290; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015) 70%); }
.shm mark, .shu mark { border-radius: 3px; background: rgba(246, 163, 92, 0.3); color: inherit; }
.shm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: box-shadow var(--wf-dur-hover) ease, background-color var(--wf-dur-hover) ease;
}
.shm-card.is-sel { background: rgba(124, 196, 255, 0.05); box-shadow: inset 0 0 0 1.5px #7cc4ff; }
.shm-card.is-preview { cursor: default; }
.shm-shot { position: relative; display: block; flex-shrink: 0; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
.shm-shot img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.shm-shot-ph { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: var(--wf-text-4); }
.shm-shot-ph svg { width: 26px; height: 26px; opacity: 0.5; }
.shm-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--cc) 16%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
  color: var(--cc);
}
.shm-cat svg { width: 11px; height: 11px; }
.shm-shot .shm-cat { position: absolute; bottom: 8px; left: 8px; z-index: 2; background: rgba(12, 8, 10, 0.84); }
.shm-size {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: rgba(12, 8, 10, 0.84);
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--wf-text-2);
}
.shm-upd {
  position: absolute;
  bottom: 36px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  background: rgba(246, 163, 92, 0.94);
  font-size: 0.7rem;
  font-weight: 800;
  color: #1a0f08;
}
.shm-upd svg { width: 11px; height: 11px; }
.shm-upd.is-inline { position: static; height: 18px; margin-left: 6px; padding: 0 5px; vertical-align: 1px; font-size: 0.64rem; }
.shm-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: rgba(12, 8, 10, 0.8);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
  color: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--wf-dur-hover) ease, background-color var(--wf-dur-hover) ease;
}
.shm-check svg { width: 14px; height: 14px; }
.shm-card:focus-within .shm-check,
.shm-body.has-sel .shm-check,
.shm-card.is-sel .shm-check { opacity: 1; }
.shm-card.is-sel .shm-check,
.shm-row.is-sel .shm-check { background: #7cc4ff; box-shadow: none; color: #0b0710; }
.shm-del { position: absolute; top: 8px; right: 8px; z-index: 3; background: rgba(12, 8, 10, 0.8); opacity: 0; transition: opacity var(--wf-dur-hover) ease, color var(--wf-dur-hover) ease, background-color var(--wf-dur-hover) ease; }
.shm-card:focus-within .shm-del { opacity: 1; }
.shm-body-in { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px 4px; }
.shm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; font-weight: 700; color: var(--wf-text-1); }
.shm-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 600; color: #c4b0ff; }
.shm-tags { display: flex; gap: 4px; margin-top: 4px; overflow: hidden; }
.shm-tags i { flex-shrink: 0; padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); font-size: 0.68rem; font-style: normal; white-space: nowrap; color: var(--wf-text-3); }
.shm-tags i.is-more { color: var(--wf-text-4); }
.shm-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px 14px 12px; font-size: 0.74rem; font-variant-numeric: tabular-nums; color: var(--wf-text-3); }
.shm-stat { display: inline-flex; align-items: center; gap: 4px; }
.shm-stat svg { width: 12px; height: 12px; color: #34d399; }
.shm-stat.is-like svg { color: #f08cc0; }
.shm-date { margin-left: auto; white-space: nowrap; color: var(--wf-text-4); }
/* Liste görünümü */
.shm-lhead,
.shm-row {
  display: grid;
  grid-template-columns: 24px 64px minmax(0, 2fr) 118px minmax(0, 1fr) 72px 60px 76px 84px 32px;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
}
.shm-lhead { padding-top: 10px; padding-bottom: 6px; font-size: 0.72rem; font-weight: 600; color: var(--wf-text-4); }
.shm-lhead span:nth-child(n+6):nth-child(-n+8) { text-align: right; }
.shm-row { border-radius: 10px; cursor: pointer; transition: background-color var(--wf-dur-hover) ease; }
.shm-row.is-sel { background: rgba(124, 196, 255, 0.08); }
.shm-row .shm-check { position: static; width: 20px; height: 20px; border-radius: 6px; }
.shm-thumb { position: relative; display: grid; place-items: center; width: 64px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px; background: rgba(255, 255, 255, 0.04); }
.shm-thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.shm-thumb i { display: grid; font-style: normal; color: var(--wf-text-4); }
.shm-thumb svg { width: 14px; height: 14px; }
.shm-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.shm-row-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; font-weight: 700; color: var(--wf-text-1); }
.shm-row-main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; color: var(--wf-text-4); }
.shm-row .shm-cat { justify-self: start; }
.shm-author { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.78rem; color: var(--wf-text-3); }
.shm-author img,
.shm-author i { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.shm-author i { display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font-size: 0.56rem; font-weight: 700; font-style: normal; color: var(--wf-text-2); }
.shm-num { font-size: 0.82rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--wf-text-2); }
.shm-num.is-like { color: #f6b7d8; }
.shm-num.is-size { color: var(--wf-text-3); }
/* Silme onayları */
.shm-mini { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.shm-mini-shot { position: relative; display: grid; place-items: center; width: 96px; flex-shrink: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--wf-text-4); }
.shm-mini-shot img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.shm-mini-shot i { display: grid; font-style: normal; }
.shm-mini-shot svg { width: 18px; height: 18px; }
.shm-mini-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shm-mini-text b { font-size: 0.9rem; color: var(--wf-text-1); }
.shm-mini-text span { font-size: 0.76rem; color: var(--wf-text-4); }
.shm-del-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; padding: 6px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); }
.shm-del-list > div { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 0.84rem; }
.shm-del-list span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wf-text-1); }
.shm-del-list em { font-style: normal; font-size: 0.76rem; color: var(--wf-text-4); }
.shm-del-list i { font-style: normal; font-size: 0.74rem; font-weight: 600; }
.shm-del-list .is-done i { color: #6ee7b7; }
.shm-del-list .is-fail i { color: #fda4af; }
/* Düzenleme penceresi (.tfe ızgarasını kullanır) */
.modal.xl:has(.she) { width: min(1000px, 96vw); }
.she-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.she-step,
.she-likes { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.she-stepper { display: flex; gap: 4px; }
.she-stepper button { flex-shrink: 0; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--wf-text-2); cursor: pointer; }
.dlg .she-stepper .dlg-input { height: 34px; min-width: 0; padding: 0 6px; text-align: center; font-variant-numeric: tabular-nums; }
.she-likes .dlg-label { display: inline-flex; align-items: center; gap: 6px; }
.she-likes .dlg-label svg { width: 13px; height: 13px; color: #f08cc0; }
.she-likers { display: flex; align-items: center; }
.she-likers i { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -6px; overflow: hidden; border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 2px #141013; font-size: 0.58rem; font-weight: 700; font-style: normal; color: var(--wf-text-2); }
.she-likers img { width: 100%; height: 100%; object-fit: cover; }
.she-likers em { margin-left: 12px; font-style: normal; font-size: 0.74rem; color: var(--wf-text-4); }
.she-nolike { font-size: 0.78rem; color: var(--wf-text-4); }
.she-id { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 8px 10px; border: 0; border-radius: 9px; background: rgba(0, 0, 0, 0.22); font: inherit; font-size: 0.72rem; font-weight: 600; text-align: left; color: var(--wf-text-4); cursor: pointer; }
.she-id code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, 'Cascadia Code', monospace; font-weight: 400; color: var(--wf-text-3); }
.she-id svg { width: 13px; height: 13px; flex-shrink: 0; }
.she-cat { margin-left: 6px; font-style: normal; }
.she-cat .shm-cat { height: 18px; font-size: 0.64rem; }
.she .dlg-field-msg { display: block; margin-top: 6px; }
.she .tfe-form > .dlg-field:not(:first-child),
.she .tfe-form > .rl-perm { margin-top: 14px; }
/* Etiket alanı */
.sh-tags-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: text;
  transition: border-color var(--wf-dur-hover) ease, box-shadow var(--wf-dur-hover) ease;
}
.sh-tags-box:focus-within { border-color: rgba(244, 236, 234, 0.5); box-shadow: 0 0 0 3px rgba(244, 236, 234, 0.08); }
.sh-tags-box [data-chips] { display: contents; }
.sh-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 9px; border-radius: 7px; background: rgba(167, 139, 250, 0.14); font-size: 0.78rem; font-weight: 600; color: #d6c8ff; }
.sh-chip button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: none; font-size: 14px; line-height: 1; color: inherit; opacity: 0.7; cursor: pointer; }
.sh-tags-box input,
.modal .sh-tags-box input { flex: 1; min-width: 120px; height: 28px; margin: 0; padding: 0 4px; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; font-size: 0.86rem; color: var(--wf-text-1); outline: none; }
.modal .sh-tags-box input:focus { border: 0; background: none; box-shadow: none; }
.sh-tags-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.sh-tags-sugg:empty { display: none; }
.sh-tags-sugg span { margin-right: 2px; font-size: 0.72rem; color: var(--wf-text-4); }
.sh-tags-sugg button { height: 24px; padding: 0 8px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.05); font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--wf-text-3); cursor: pointer; }

/* ============================================================
   [MOD YÜKLE] bilgiler · dosyalar + kart önizlemesi · tehlikeli bölge
   ============================================================ */
/* Yayın masası: solda önizleme sahnesi (kapak + canlı kimlik + arşiv + son
   yüklenenler), sağda yayın paneli. Sahnenin ışığı kapağın renginden (--amb). */
.shu { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 28vw, 600px); align-items: stretch; gap: 14px; }

.shu-stage {
  --amb: 177, 140, 255;
  container-type: inline-size;
  display: flex;
  min-width: 0;
  padding: 20px 22px 22px;
  border-radius: 18px;
  background: radial-gradient(70% 62% at 50% 34%, rgba(var(--amb), 0.12), transparent 72%), rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.shu-stage.has-cover { background: radial-gradient(70% 62% at 50% 34%, rgba(var(--amb), 0.22), transparent 72%), rgba(255, 255, 255, 0.02); }
/* Kapak pencere yüksekliğine göre sınırlanır; sahne içeriği onun genişliğinde ortalanır */
.shu-stage-in { display: flex; flex-direction: column; gap: 14px; width: min(100%, calc(58dvh * 16 / 9)); min-width: 0; margin: 0 auto; }
.shu-stage-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.shu-stage-head h3 { flex-shrink: 0; margin: 0; font-family: var(--wf-font-display); font-size: 1.05rem; font-weight: 600; color: var(--wf-text-1); }
.shu-stage-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; line-height: 1.4; color: var(--wf-text-4); }

.shu-cover .upk-shot { border-radius: 16px; border-color: rgba(255, 255, 255, 0.14); background: rgba(8, 5, 7, 0.5); }
.shu-cover .upk-shot.has-img { border-color: rgba(255, 255, 255, 0.1); }
.shu-cover .upk-shot-empty { padding-bottom: 16%; font-size: 0.8rem; }
.shu-cover .upk-shot-empty svg { width: 34px; height: 34px; }
.shu-cover .upk-shot-empty b { font-size: 1rem; }
.shu-cover .upk-shot-change { top: 14px; bottom: auto; z-index: 2; }
.shu-cover .upk-shot-clear { z-index: 2; }
.shu-cover .upk-shot-msg { margin: 8px 2px 0; }
/* Kapağın üstündeki kimlik: kategori + boyut, altta ad / başlık / etiketler */
.shu-over { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 16px 0; pointer-events: none; }
.shu-over-top { display: flex; align-items: center; gap: 6px; }
.shu-over-top .shm-cat { background: rgba(12, 8, 10, 0.8); }
.shu-over-size { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 7px; background: rgba(12, 8, 10, 0.8); font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wf-text-1); }
.shu-over-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0 -16px; padding: 56px 20px 18px; background: linear-gradient(180deg, transparent, rgba(8, 5, 7, 0.86) 72%); }
.shu-over-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 2px; font-family: var(--wf-font-display); font-size: clamp(1.15rem, 3.4cqi, 2rem); font-weight: 600; line-height: 1.3; color: #ffffff; }
.shu-over-text b.is-ph { color: rgba(255, 255, 255, 0.32); }
.shu-over-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.92rem; font-weight: 700; line-height: 1.4; color: var(--cc); }
.shu-over-title img { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; }
.shu-over-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.shu-over-tags i { height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); font-style: normal; font-size: 0.68rem; font-weight: 600; line-height: 20px; color: var(--wf-text-2); }

.shu-arch { display: flex; flex-direction: column; gap: 6px; }
.shu-arch .upk-field { min-height: 66px; padding: 12px 12px 12px 12px; border-radius: 14px; background: rgba(8, 5, 7, 0.45); }
.shu-arch .upk-field-ico { width: 42px; height: 42px; border-radius: 12px; }
.shu-arch .upk-field-text b { font-size: 0.92rem; }
.shu-arch .upk-field-text span { font-size: 0.8rem; }
.shu-parted { margin: 0 2px; font-size: 0.76rem; color: #7cc4ff; }
.shu-parted[hidden] { display: none; }

.shu-recent { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.shu-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shu-recent-head b { font-size: 0.8rem; font-weight: 600; color: var(--wf-text-3); }
.shu-more { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--wf-text-3); cursor: pointer; transition: color var(--wf-dur-hover) ease; }
.shu-more svg { width: 13px; height: 13px; }
/* Tek satır: sığmayanlar gizlenir (yüksekliği sabit, sahne kaymaz) */
.shu-recent-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-rows: 56px; grid-auto-rows: 0; column-gap: 8px; overflow: hidden; }
.shu-recent-item { display: flex; align-items: center; gap: 10px; min-width: 0; height: 56px; padding: 0 10px 0 8px; overflow: hidden; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); font: inherit; text-align: left; color: inherit; cursor: pointer; transition: background-color var(--wf-dur-hover) ease, box-shadow var(--wf-dur-hover) ease; }
.shu-recent-item.is-new { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.5); }
.shu-recent-shot { position: relative; display: grid; place-items: center; width: 64px; height: 36px; flex-shrink: 0; overflow: hidden; border-radius: 7px; background: rgba(255, 255, 255, 0.05); color: var(--wf-text-4); }
.shu-recent-shot img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.shu-recent-shot svg { width: 14px; height: 14px; }
.shu-recent-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.shu-recent-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; font-weight: 700; line-height: 1.4; color: var(--wf-text-1); }
.shu-recent-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; line-height: 1.4; color: var(--wf-text-4); }
.shu-recent-skel { height: 56px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)); }
.shu-recent-empty { grid-column: 1 / -1; display: flex; align-items: center; height: 56px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.02); font-size: 0.8rem; color: var(--wf-text-4); }

.shu-panel { display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.shu-panel-head h3 { margin: 0; font-family: var(--wf-font-display); font-size: 1.05rem; font-weight: 600; color: var(--wf-text-1); }
.shu-panel-head p { margin: 3px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--wf-text-4); }
.shu-fields { display: flex; flex-direction: column; margin-top: 16px; }
.shu-fields > * + .dlg-field { margin-top: 14px; }
.shu-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 0.76rem; line-height: 1.45; color: #f6c98a; }
.shu-msg:empty { display: none; }
.shu-msg svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
/* Başlık alanı: eşleşen şampiyonun yüzü ya da kategorinin glifi solda */
.shu-title { position: relative; display: block; }
.shu-title-ico { position: absolute; top: 50%; left: 10px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; transform: translateY(-50%); pointer-events: none; }
.shu-title-ico img { width: 24px; height: 24px; border-radius: 50%; }
.shu-title-ico i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--cc) 16%, transparent); color: var(--cc); }
.shu-title-ico svg { width: 13px; height: 13px; }
.shu-title.has-ico .dlg-input { padding-left: 42px; }

/* Panelin boş yüksekliği: sık başlıklar ya da aynı başlıktaki modlar. Yer yoksa
   0'a iner (kaydırma yaratmaz); satırlar yarım kesilmez (sığmayan satır 0 yükseklik). */
.shu-same { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-height: 0; overflow: hidden; }
.shu-same:empty { display: none; }
.shu-same-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; padding-top: 18px; }
.shu-same-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 600; line-height: 1.4; color: var(--wf-text-3); }
.shu-same-head em { flex-shrink: 0; font-style: normal; font-size: 0.74rem; color: var(--wf-text-4); }
.shu-same-list { display: grid; flex: 1 1 0; min-height: 0; grid-template-rows: repeat(auto-fill, 46px); grid-auto-rows: 0; row-gap: 4px; overflow: hidden; }
.shu-same-item { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; padding: 0 8px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.03); font: inherit; text-align: left; color: inherit; cursor: pointer; transition: background-color var(--wf-dur-hover) ease; }
.shu-same-item .shu-recent-shot { width: 52px; height: 29px; border-radius: 6px; }
.shu-same-chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 0; overflow: hidden; }
.shu-same-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.04); font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--wf-text-2); cursor: pointer; transition: background-color var(--wf-dur-hover) ease, color var(--wf-dur-hover) ease; }
.shu-same-chip img { width: 18px; height: 18px; margin-left: -4px; border-radius: 50%; }
.shu-same-chip em { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--wf-text-4); }

/* Hazırlık: panelin dibine yaslanır; eksik zorunlular yüklemede kırmızı yanar */
.shu-ready { margin-top: auto; padding-top: 18px; }
.shu-ready-head { display: block; margin-bottom: 8px; font-size: 0.8rem; font-weight: 700; color: #f6c98a; }
.shu-ready-head.is-ok { color: #6ee7b7; }
.shu-ready-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.shu-ready-item { display: flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.03); font-size: 0.8rem; font-weight: 600; white-space: nowrap; color: var(--wf-text-3); transition: box-shadow var(--wf-dur-hover) ease, color var(--wf-dur-hover) ease; }
.shu-ready-item i { display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22); color: #0b1a13; }
.shu-ready-item i svg { width: 10px; height: 10px; stroke-width: 3; }
.shu-ready-item.is-ok { color: var(--wf-text-1); }
.shu-ready-item.is-ok i { background: #34d399; box-shadow: none; }
.shu-ready-item em { margin-left: auto; font-style: normal; font-size: 0.68rem; font-weight: 500; color: var(--wf-text-4); }
.shu-ready.is-alert .shu-ready-item.is-need { box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.55); color: #fda4af; }
.shu-ready.is-alert .shu-ready-item.is-need i { box-shadow: inset 0 0 0 1.5px rgba(251, 113, 133, 0.75); }
.shu .upk-prog { margin-top: 12px; }
.shu-acts { display: flex; gap: 8px; margin-top: 14px; }
.shu-acts .dlg-btn { height: 44px; }
.shu-acts .shu-go { flex: 1; justify-content: center; font-size: 0.92rem; }
.shu.is-locked .shu-fields, .shu.is-locked .shu-cover,
.shu.is-locked .shu-arch { opacity: 0.55; pointer-events: none; transition: opacity var(--wf-dur-state) ease; }

/* Kısa masaüstü (768–800 px laptop): sayfa kaymadan sığsın; ikincil parçalar çekilir */
@media (max-height: 820px) and (min-width: 1101px) {
  .shu-stage-head span, .shu-panel-head p, .shu-recent, .shu-same, .shu-ready-head, .shu-ready-item em { display: none; }
  .shu-fields { margin-top: 12px; }
  .shu-fields > * + .dlg-field { margin-top: 10px; }
  .shu .sh-tags-sugg { max-height: 24px; overflow: hidden; }
  .shu-ready { padding-top: 12px; }
  .shu-ready-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .shu-ready-item { gap: 6px; padding: 0 7px; font-size: 0.74rem; }
  .shu-acts { margin-top: 10px; }
  .shu-acts .dlg-btn { height: 40px; }
}

/* Tehlikeli bölge: sessiz; sayfanın en canlı öğesi birincil düğme kalır */
.shu-danger { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 14px 12px 12px; border-radius: 14px; background: rgba(251, 113, 133, 0.035); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.16); }
.shu-danger-ico { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: rgba(251, 113, 133, 0.12); color: #fb7185; }
.shu-danger-ico svg { width: 16px; height: 16px; }
.shu-danger-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.shu-danger-text b { font-size: 0.86rem; font-weight: 700; color: var(--wf-text-1); }
.shu-danger-text span { font-size: 0.76rem; line-height: 1.45; color: var(--wf-text-4); }
.shu-danger-count { flex-shrink: 0; font-style: normal; font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fda4af; }
@media (hover: hover) and (pointer: fine) {
  .shu-recent-item:hover { background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
  .shu-recent-item.is-new:hover { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.7); }
  .shu-more:hover { color: var(--wf-text-1); }
  .shu-same-item:hover { background: rgba(255, 255, 255, 0.06); }
  .shu-same-chip:hover { background: rgba(255, 255, 255, 0.08); color: var(--wf-text-1); }
}
.shu-final { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px; border-radius: 14px; background: rgba(251, 113, 133, 0.08); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.3); text-align: center; }
.shu-final b { font-family: var(--wf-font-display); font-size: 1.8rem; font-weight: 600; color: #fda4af; }
.shu-final span { font-size: 0.8rem; color: var(--wf-text-3); }
.shu-ack { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); font-size: 0.84rem; line-height: 1.45; color: var(--wf-text-2); cursor: pointer; }
.modal .shu-ack input { width: 18px; height: 18px; flex-shrink: 0; margin: 1px 0 0; padding: 0; border: 0; background: none; box-shadow: none; accent-color: #fb7185; }
.shu-wipe-prog { margin: 12px 0 0; font-size: 0.8rem; color: var(--wf-text-3); }
.shu-wipe-prog.is-error { color: #fda4af; }

/* ============================================================
   [TOPLU MOD YÜKLE] ortak bilgiler · kuyruk tablosu
   ============================================================ */
.shb .usr-tools { display: flex; align-items: center; gap: 8px; }
.shb-add { cursor: pointer; }
.shb-common { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.shb-common-head { display: flex; align-items: center; gap: 8px; }
.shb-common-head span { display: grid; color: #f6a35c; }
.shb-common-head svg { width: 15px; height: 15px; }
.shb-common-head b { font-size: 0.88rem; font-weight: 700; color: var(--wf-text-1); }
.shb-common-head em { font-style: normal; font-size: 0.76rem; color: var(--wf-text-4); }
.shb-common-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) auto; align-items: end; gap: 12px; }
.shb-common-grid .dlg-field + .dlg-field { margin-top: 0; }
.shb-common .sh-tags-sugg { display: none; }
.shb-common-acts { display: flex; gap: 6px; }
.shb-list { flex: 1; min-height: 0; padding: 4px 10px 10px; }
.shb-head,
.shb-row { display: grid; grid-template-columns: 28px 64px minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr) 92px 32px; align-items: center; gap: 10px; }
.shb-head { padding: 8px 10px 6px; font-size: 0.72rem; font-weight: 600; color: var(--wf-text-4); }
.shb-row { position: relative; margin-bottom: 4px; padding: 8px 10px; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.shb-row.is-missing { box-shadow: inset 3px 0 0 #f0b45a; }
.shb-row.is-error { box-shadow: inset 3px 0 0 #fb7185; }
.shb-row.is-done { box-shadow: inset 3px 0 0 #34d399; }
.shb-row.is-done > :not(.shb-bar):not(.shb-state):not(.shb-no) { opacity: 0.6; }
.shb-row.is-busy { background: rgba(124, 196, 255, 0.05); }
.shb-no { display: grid; place-items: center; font-size: 0.76rem; font-variant-numeric: tabular-nums; color: var(--wf-text-4); }
.shb-no svg { width: 14px; height: 14px; }
.shb-row.is-done .shb-no { color: #34d399; }
.shb-row.is-error .shb-no { color: #fb7185; }
.shb-thumb { position: relative; display: grid; place-items: center; width: 64px; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.05); color: var(--wf-text-4); cursor: pointer; }
.shb-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shb-thumb svg { width: 15px; height: 15px; }
.shb-thumb:disabled { cursor: default; }
.ops-form .shb-row .dlg-input { height: 34px; padding: 0 10px; border-radius: 8px; font-size: 0.84rem; }
.ops-form .shb-row .dlg-input:disabled { opacity: 0.8; }
.shb-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.shb-title input { flex: 1; min-width: 0; }
.shb-title i { flex-shrink: 0; font-style: normal; }
.shb-title .shm-cat { height: 20px; padding: 0 6px; font-size: 0.64rem; }
.shb-title .shm-cat svg { display: none; }
.shb-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.shb-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; font-weight: 600; color: var(--wf-text-2); }
.shb-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; color: var(--wf-text-4); }
.shb-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; font-weight: 600; text-align: right; color: var(--wf-text-3); }
.shb-row.is-ready .shb-state { color: #7cc4ff; }
.shb-row.is-missing .shb-state { color: #f6c98a; }
.shb-row.is-done .shb-state { color: #6ee7b7; }
.shb-row.is-error .shb-state { color: #fda4af; }
.shb-bar { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; }
.shb-bar i { display: block; height: 100%; background: #7cc4ff; transform-origin: left; transition: transform 200ms linear; }
.shb-row.is-done .shb-bar i { background: #34d399; }
.shb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; min-height: 280px; border: 1.5px dashed rgba(255, 255, 255, 0.14); border-radius: 16px; background: none; font: inherit; font-size: 0.84rem; color: var(--wf-text-4); cursor: pointer; }
.shb-empty svg { width: 34px; height: 34px; margin-bottom: 4px; color: #f6a35c; }
.shb-empty b { font-family: var(--wf-font-display); font-size: 1.15rem; font-weight: 600; color: var(--wf-text-1); }
.shb-empty em { font-style: normal; font-size: 0.78rem; text-decoration: underline; text-underline-offset: 2px; color: var(--wf-text-3); }
.shb-prog { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 10px 16px 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.shb-prog[hidden] { display: none; }
.shb-prog .upk-bar { flex: 1; }
.shb-prog span { font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wf-text-3); }

/* ============================================================
   [MAĞAZAYI YEDEKLE] özet + iş · dosya listesi
   ============================================================ */
.bk { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: start; gap: 14px; height: calc(100dvh - 64px - 48px); min-height: 520px; }
.bk-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px; border-radius: 18px; background: linear-gradient(160deg, rgba(91, 200, 245, 0.08) 0%, rgba(255, 255, 255, 0.02) 60%); box-shadow: inset 0 0 0 1px rgba(91, 200, 245, 0.2); }
.bk-head { display: flex; align-items: flex-start; gap: 14px; }
.bk-ico { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: rgba(91, 200, 245, 0.14); color: #5bc8f5; }
.bk-ico svg { width: 22px; height: 22px; }
.bk-head h3 { margin: 0; font-family: var(--wf-font-display); font-size: 1.2rem; font-weight: 600; color: var(--wf-text-1); }
.bk-head p { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--wf-text-3); }
.bk-sum { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.22); }
.bk-big { display: flex; flex-direction: column; }
.bk-big b { font-family: var(--wf-font-display); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wf-text-1); }
.bk-big span { font-size: 0.76rem; color: var(--wf-text-4); }
.bk-when { margin-left: auto; font-size: 0.74rem; color: var(--wf-text-4); }
.bk-empty { display: flex; flex-direction: column; gap: 4px; }
.bk-empty b { font-size: 0.92rem; color: var(--wf-text-1); }
.bk-empty span { font-size: 0.8rem; line-height: 1.45; color: var(--wf-text-3); }
.bk-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-kinds:empty { display: none; }
.bk-kind { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; background: color-mix(in srgb, var(--c) 12%, transparent); font-size: 0.78rem; color: var(--wf-text-2); }
.bk-kind svg { width: 13px; height: 13px; color: var(--c); }
.bk-kind b { font-weight: 700; color: var(--wf-text-1); }
.bk-kind em { margin-left: 2px; font-style: normal; color: var(--wf-text-4); }
.bk-job { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(124, 196, 255, 0.22); }
.bk-job[hidden] { display: none; }
.bk-job.is-done { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.3); }
.bk-job.is-cancelled { box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.3); }
.bk-job-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 0.86rem; }
.bk-job-top b { font-weight: 700; color: var(--wf-text-1); }
.bk-job-top span { font-family: var(--wf-font-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wf-text-2); }
.bk-job.is-zip .upk-bar i { background: #b18cff; }
.bk-job.is-done .upk-bar i { background: #34d399; }
.bk-job.is-cancelled .upk-bar i { background: #fb7185; }
.bk-job-meta { display: block; margin-top: 7px; font-size: 0.76rem; font-variant-numeric: tabular-nums; color: var(--wf-text-3); }
.bk-job-file { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 0.72rem; color: var(--wf-text-4); }
.bk-job-file:empty { display: none; }
.bk-acts { display: flex; justify-content: flex-end; gap: 8px; }
.bk-files { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.bk-files-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.bk-files-bar .usr-search { flex: 1 1 200px; height: 36px; }
.bk-list { flex: 1; min-height: 0; padding: 6px 8px 10px; }
.bk-file { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; font-size: 0.78rem; }
.bk-file code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 0.74rem; color: var(--wf-text-2); }
.bk-file > span:last-child { font-size: 0.74rem; font-variant-numeric: tabular-nums; color: var(--wf-text-4); }
.bk-file-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); }
.bk-file-ico svg { width: 13px; height: 13px; }
.bk-more { margin: 8px; font-size: 0.76rem; text-align: center; color: var(--wf-text-4); }
.bk mark { border-radius: 3px; background: rgba(91, 200, 245, 0.25); color: inherit; }

/* ============================================================
   [RAPORLAR] gelen kutusu · konuşma · cevap alanı
   ============================================================ */
.rpt .rl-body { grid-template-columns: 360px minmax(0, 1fr); }
.rpt-search { flex: 0 1 280px; }
.rpt-live { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; background: #f0b45a; }
.rpt-thumb { position: relative; width: 44px; height: 44px; border-radius: 11px; }
.rpt-thumb img,
.rpt-hero img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.rpt-thumb svg { width: 17px; height: 17px; }
.rpt-item { min-height: 64px; }
.rpt-reason { font-style: normal; font-weight: 600; color: var(--c); }
.rpt-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.rpt-item-side time { font-size: 0.72rem; color: var(--wf-text-4); }
.rpt-state { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-style: normal; font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.rpt-state.is-open { background: rgba(240, 180, 90, 0.15); color: #f6c98a; }
.rpt-state.is-done { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; }
.rpt-state.is-hidden { background: rgba(255, 255, 255, 0.06); color: var(--wf-text-3); }
.rpt-pager { flex-shrink: 0; padding: 4px 8px 10px; }
.rpt-pager:empty { display: none; }
.rpt-hero { position: relative; width: 64px; height: 64px; border-radius: 16px; }
.rpt-pane { display: flex; flex-direction: column; gap: 16px; padding: 6px 22px 22px; }
.rpt-msg { display: flex; align-items: flex-start; gap: 12px; }
.rpt-msg.is-reply { justify-content: flex-end; }
.rpt-who { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; width: 80px; padding: 0; border: 0; background: none; font: inherit; text-align: center; color: inherit; cursor: pointer; }
.rpt-who > span:last-child { display: flex; flex-direction: column; min-width: 0; max-width: 80px; }
.rpt-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; font-weight: 700; color: var(--wf-text-1); }
.rpt-who i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: 0.7rem; color: var(--wf-text-4); }
.rpt-ava { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 0.72rem; font-weight: 700; color: var(--wf-text-2); }
.rpt-ava img { width: 100%; height: 100%; object-fit: cover; }
.rpt-bubble { flex: 1; max-width: 680px; padding: 12px 16px; border-radius: 4px 16px 16px 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.rpt-bubble.is-reply { border-radius: 16px 4px 16px 16px; background: rgba(167, 139, 250, 0.1); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.25); }
.rpt-bubble-lbl { display: block; margin-bottom: 6px; font-size: 0.72rem; font-weight: 700; color: var(--wf-text-4); }
.rpt-bubble p { margin: 0; font-size: 0.92rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--wf-text-1); }
.rpt-bubble time { display: block; margin-top: 8px; font-size: 0.72rem; color: var(--wf-text-4); }
.rpt-compose { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.rpt-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.rpt-quick button { max-width: 100%; height: 28px; padding: 0 10px; overflow: hidden; border: 0; border-radius: 8px; background: rgba(167, 139, 250, 0.1); font: inherit; font-size: 0.76rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: #d6c8ff; cursor: pointer; }
.rl textarea.rpt-ta { height: auto; min-height: 110px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.rpt-compose-foot { display: flex; align-items: center; gap: 12px; }
.rpt-count { font-size: 0.74rem; font-variant-numeric: tabular-nums; color: var(--wf-text-4); }
.rpt-count.is-low { color: #f6c98a; }
.rpt-note { flex: 1; font-size: 0.74rem; color: var(--wf-text-4); }
.rpt-pick { flex: 1; }
.rpt-pick-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 15px; background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.rpt-pick-ico svg { width: 24px; height: 24px; }
.rpt-list-empty { min-height: 220px; font-size: 0.82rem; }
.rpt mark { border-radius: 3px; background: rgba(167, 139, 250, 0.28); color: inherit; }

/* ============================================================
   [VERİTABANI] özet · yedek kartı · tablolar · yedek penceresi
   ============================================================ */
.dbk { display: flex; flex-direction: column; gap: 14px; height: calc(100dvh - 64px - 48px); min-height: 560px; }
.dbk-hero { display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; flex-shrink: 0; padding: 20px 22px; border-radius: 18px; background: linear-gradient(135deg, rgba(224, 177, 90, 0.1) 0%, rgba(255, 255, 255, 0.02) 55%); box-shadow: inset 0 0 0 1px rgba(224, 177, 90, 0.24); }
.dbk-hero-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(224, 177, 90, 0.16); color: #e0b15a; }
.dbk-hero-ico svg { width: 24px; height: 24px; }
.dbk-hero-text h3 { margin: 0; font-family: var(--wf-font-display); font-size: 1.2rem; font-weight: 600; color: var(--wf-text-1); }
.dbk-hero-text h3 em { margin-left: 4px; font-family: var(--wf-font-text); font-style: normal; font-size: 0.8rem; color: var(--wf-text-4); }
.dbk-hero-text p { margin: 4px 0 6px; font-size: 0.82rem; line-height: 1.5; color: var(--wf-text-3); }
.dbk-last { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--wf-text-2); }
.dbk-last svg { width: 13px; height: 13px; }
.dbk-last b { font-weight: 700; }
.dbk-last.is-warn { color: #f6c98a; }
.dbk-restore { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dbk-cmd { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 12px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.28); font: inherit; text-align: left; color: var(--wf-text-2); cursor: pointer; }
.dbk-cmd code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 0.76rem; color: #f1d29a; }
.dbk-cmd svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--wf-text-4); }
.dbk-table { flex: 1; min-height: 0; }
.dbk-search { flex: 0 1 240px; height: 34px; }
.dbk-head,
.dbk-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 110px 80px 100px; align-items: center; gap: 14px; padding: 0 20px; }
.dbk-head { padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.72rem; font-weight: 600; color: var(--wf-text-4); }
.dbk-head span:nth-child(n+3) { text-align: right; }
.dbk-rows { flex: 1; min-height: 0; padding: 4px 0 10px; }
.dbk-row { height: 40px; transition: background-color var(--wf-dur-hover) ease; }
.dbk-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dbk-name i { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #4fd1c0; }
.dbk-name code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 0.8rem; color: var(--wf-text-1); }
.dbk-share { display: flex; align-items: center; gap: 10px; }
.dbk-bar { flex: 1; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.06); }
.dbk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e0b15a, #f6a35c); transform-origin: left; }
.dbk-share em { width: 44px; font-style: normal; font-size: 0.74rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--wf-text-3); }
.dbk-num { font-size: 0.84rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--wf-text-2); }
.dbk-num.is-dim { color: var(--wf-text-4); }
.dbk-num.is-size { font-weight: 600; color: #f1d29a; }
.dbk mark { border-radius: 3px; background: rgba(224, 177, 90, 0.3); color: inherit; }
.dbk-run { padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.dbk-run-top { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.88rem; }
.dbk-run-top b { font-weight: 700; color: var(--wf-text-1); }
.dbk-run-top span { font-family: var(--wf-font-display); font-variant-numeric: tabular-nums; color: var(--wf-text-2); }
.dbk-run-bar { display: none; }
.dbk-run.is-done .dbk-run-bar,
.dbk-run.is-error .dbk-run-bar { display: block; }
.dbk-run.is-done .dbk-run-bar i { background: #34d399; transform: scaleX(1); }
.dbk-run.is-error .dbk-run-bar i { background: #fb7185; transform: scaleX(1); }
.dbk-run-meta { display: block; margin-top: 8px; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--wf-text-3); }
.dbk-run-meta code { font-family: ui-monospace, 'Cascadia Code', monospace; color: var(--wf-text-2); }

@media (hover: hover) and (pointer: fine) {
  .shm-card:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
  .shm-card.is-sel:hover { box-shadow: inset 0 0 0 1.5px #7cc4ff; }
  .shm-card.is-preview:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
  .shm-card:not(.is-preview):hover .shm-check,
  .shm-card:hover .shm-del { opacity: 1; }
  .shm-row:hover { background: rgba(255, 255, 255, 0.035); }
  .she-stepper button:hover,
  .sh-tags-sugg button:hover { background: rgba(255, 255, 255, 0.1); color: var(--wf-text-1); }
  .sh-chip button:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
  .she-id:hover,
  .dbk-cmd:hover { background: rgba(0, 0, 0, 0.36); color: var(--wf-text-2); }
  .shb-thumb:not(:disabled):hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
  .shb-empty:hover { border-color: rgba(246, 163, 92, 0.5); }
  .rpt-who:hover b { text-decoration: underline; text-underline-offset: 2px; }
  .rpt-quick button:hover { background: rgba(167, 139, 250, 0.2); }
  .bk-file:hover,
  .dbk-row:hover { background: rgba(255, 255, 255, 0.035); }
}
@media (hover: none) {
  .shm-check, .shm-del { opacity: 1; }
}
@media (max-width: 1280px) {
  .shm-lhead, .shm-row { grid-template-columns: 24px 64px minmax(0, 2fr) 118px 72px 60px 76px 84px 32px; }
  .shm-lhead span:nth-child(5), .shm-row .shm-author { display: none; }
  .shb-head, .shb-row { grid-template-columns: 28px 64px minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) 92px 32px; }
  .shb-head span:nth-child(6), .shb-row .shb-meta { display: none; }
  .dbk-hero { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dbk-restore { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 1100px) {
  .rpt .rl-body { grid-template-columns: 300px minmax(0, 1fr); }
  .shb-common-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shu { grid-template-columns: minmax(0, 1fr); }
  .shu-ready { margin-top: 0; }
  .shu-same { flex: none; max-height: 260px; }
  .shu-same-list { flex: none; grid-template-rows: none; grid-auto-rows: 46px; max-height: 196px; }
}
@media (max-width: 760px) {
  .shm .usr-tools { flex-wrap: wrap; }
  .shm-body { padding: 10px; }
  .shm-body.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shm-body-in { padding: 10px 10px 2px; }
  .shm-foot { padding: 6px 10px 10px; }
  .shm-date { display: none; }
  .shm-lhead { display: none; }
  .shm-row { grid-template-columns: 24px 56px minmax(0, 1fr) 32px; }
  .shm-row .shm-cat, .shm-row .shm-num, .shm-row .shm-date { display: none; }
  .shu-stage { padding: 14px; }
  .shu-stage-head span { display: none; }
  .shu-panel { padding: 16px; }
  .shu-danger { flex-wrap: wrap; }
  .shu-danger-count { width: 100%; order: 3; }
  .shu-danger .dlg-btn { width: 100%; justify-content: center; }
  .shb .usr-tools { flex-wrap: wrap; }
  .shb-common-grid { grid-template-columns: minmax(0, 1fr); }
  .shb-head { display: none; }
  .shb-row { grid-template-columns: 56px minmax(0, 1fr) 32px; gap: 6px 10px; }
  .shb-row .shb-no { display: none; }
  .shb-row .shb-thumb { grid-column: 1; grid-row: 1 / span 2; width: 56px; }
  .shb-row [data-f="name"] { grid-column: 2; grid-row: 1; }
  .shb-row .shb-title { grid-column: 2; grid-row: 2; }
  .shb-row [data-f="tags"] { grid-column: 2; grid-row: 3; }
  .shb-row .shb-state { grid-column: 1; grid-row: 3; text-align: left; }
  .shb-row .shb-rm { grid-column: 3; grid-row: 1; }
  .bk { grid-template-columns: minmax(0, 1fr); height: auto; }
  .bk-files { height: 420px; }
  .rpt .rl-body { grid-template-columns: minmax(0, 1fr); }
  .rpt .rl-items { flex-direction: column; max-height: 300px; padding: 0; overflow-x: hidden; overflow-y: auto; }
  .rpt .rl-item { width: 100%; flex: none; }
  .rpt .rl-item-text span { display: block; }
  .rpt-who { width: 56px; }
  .rpt-note { display: none; }
  .dbk { height: auto; }
  .dbk-hero { grid-template-columns: minmax(0, 1fr); }
  .dbk-restore { grid-column: auto; grid-row: auto; }
  .dbk-go { width: 100%; justify-content: center; }
  .dbk-table { height: 480px; flex: none; }
  .dbk-head, .dbk-row { grid-template-columns: minmax(0, 1fr) 90px; padding: 0 14px; }
  .dbk-head span:nth-child(2), .dbk-head span:nth-child(3), .dbk-head span:nth-child(4),
  .dbk-row .dbk-share, .dbk-row .dbk-num:not(.is-size) { display: none; }
}
.dlg-label:has(> .stp-count) { display: flex; align-items: baseline; }