/**
 * Omnex Pages — pages/support.css
 * Destek talepleri (#/support, #/support/:id; pages/Support.js) — 2026-09-29. Yazışma kit `ox-thread` (components/thread.css);
 * kahraman ox-entity-hero + ox-kv (companies.css). Burada yalnız form, liste hücreleri ve kompozisyon parçaları.
 * Telefon kuralları yalnız html[data-device].
 */

/* ---------- Yeni talep formu ---------- */
.ox-sp-form { display: grid; gap: var(--ox-space-4); }
.ox-sp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--ox-space-2); }
.ox-sp-cat {
  display: flex;
  align-items: flex-start;
  gap: var(--ox-space-2);
  padding: var(--ox-space-3);
  border: 1px solid var(--ox-border);
  border-radius: var(--ox-radius-md);
  background: var(--ox-surface);
  color: var(--ox-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ox-transition-fast), background-color var(--ox-transition-fast);
}
.ox-sp-cat:hover { border-color: var(--ox-border-strong); }
.ox-sp-cat.is-active { border-color: var(--ox-accent); background: var(--ox-primary-subtle); box-shadow: 0 0 0 1px var(--ox-accent) inset; }
.ox-sp-cat__ic {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--ox-radius-md);
  background: var(--ox-surface-2);
  color: var(--ox-fg-muted);
}
.ox-sp-cat.is-active .ox-sp-cat__ic { background: var(--ox-surface); color: var(--ox-accent); }
.ox-sp-cat__txt { display: grid; gap: 2px; min-width: 0; }
.ox-sp-cat__txt b { font-size: var(--ox-text-sm); font-weight: var(--ox-weight-semibold); }
.ox-sp-cat__txt span { font-size: var(--ox-text-xs); line-height: 1.4; color: var(--ox-fg-muted); }
.ox-sp-form .ox-rte__area, .ox-sp-reply .ox-rte__area { min-height: 140px; }

/* ---------- Liste ---------- */
.ox-sp-num { font-family: var(--ox-font-mono); font-size: var(--ox-text-xs); }
.ox-sp-subject { display: block; margin-top: 2px; color: var(--ox-fg); font-weight: var(--ox-weight-medium); overflow-wrap: anywhere; }
.ox-sp-catcell { display: inline-flex; align-items: center; gap: 6px; }
.ox-sp-catcell .ox-icon { color: var(--ox-fg-faint); }
.ox-sp-by { color: var(--ox-fg-faint); font-size: var(--ox-text-xs); }
.ox-sp-empty { padding: var(--ox-space-8) var(--ox-space-4); }
.ox-sp-empty .ox-btn { margin-top: var(--ox-space-3); }

/* ---------- Yazışma sayfası ---------- */
.ox-sp-hero__icon { color: var(--ox-fg-muted); }
.ox-sp-cat--support { background: var(--ox-info-subtle); color: var(--ox-info); border-color: transparent; }
.ox-sp-cat--bug { background: var(--ox-danger-subtle); color: var(--ox-danger); border-color: transparent; }
.ox-sp-cat--request { background: var(--ox-primary-subtle); color: var(--ox-accent); border-color: transparent; }
.ox-sp-cat--suggestion { background: var(--ox-warning-subtle); color: var(--ox-warning); border-color: transparent; }
.ox-sp-cat--other { background: var(--ox-surface-2); color: var(--ox-fg-muted); border-color: transparent; }
.ox-sp-hero__subject { overflow-wrap: anywhere; }
.ox-sp-hero .ox-entity-hero__meta a { display: inline-flex; align-items: center; gap: 5px; color: var(--ox-accent); }

.ox-sp-reply { display: grid; gap: var(--ox-space-3); }
.ox-sp-reply__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ox-space-2); }
.ox-sp-reply__foot .ox-f-muted { font-size: var(--ox-text-xs); }
.ox-sp-note {
  display: flex;
  align-items: flex-start;
  gap: var(--ox-space-2);
  margin: 0;
  padding: var(--ox-space-2) var(--ox-space-3);
  border-radius: var(--ox-radius-md);
  background: var(--ox-info-subtle);
  font-size: var(--ox-text-xs);
  color: var(--ox-fg);
}
.ox-sp-note .ox-icon { flex-shrink: 0; margin-top: 1px; color: var(--ox-info); }

.ox-sp-rail { position: sticky; top: var(--ox-space-4); }
.ox-sp-tiplist { display: grid; gap: var(--ox-space-2); margin: 0; padding-left: 1.1em; font-size: var(--ox-text-xs); line-height: 1.5; color: var(--ox-fg-muted); }

html[data-device="phone"] .ox-sp-rail { position: static; }
html[data-device="phone"] .ox-sp-cats { grid-template-columns: minmax(0, 1fr); }
html[data-device="phone"] .ox-sp-reply__foot .ox-btn { flex: 1; justify-content: center; }