/* KAYNAK: sites/_shared/css/ (REV-54 HF set, 11 May 2026) — BURAYA KOPYALANDI.
   Neden kopya: edge kutusunda (SP1900/Tier 2) sites/ yok; panel kendi kendine
   yetmeli. sites/ CANLI ve dokunulmaz — degisiklik once orada yapilir, sonra
   buraya kopyalanir. Kopyanin bozulmadigini panel_v3_nav_test.sh olcuyor.
*/
/* ═══════════════════════════════════════════════════════════════════════
   SOLVEON PULSE · COMPONENT LIBRARY — HF Set primitives (REV-54 Faz 1)
   Depends on: tokens.css
   Pages opt-in: include tokens.css FIRST, then components.css.
   Tailwind/theme.css continue to work side-by-side until migration ends.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. CARDS — base shell
   ───────────────────────────────────────────────────────────────────── */

.s-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  transition: box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.s-card-sunk {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

.s-card-interactive { cursor: pointer; }
.s-card-interactive:hover { box-shadow: var(--shadow-hover); }
.s-card-interactive:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   2. HERO CARD — left-border 4px semantic variant, 5 colors
   ───────────────────────────────────────────────────────────────────── */

.hero-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--ink-300);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 110px;
  position: relative;
}

.hero-card__label {
  font-size: var(--fz-xs);
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-card__value {
  font-family: var(--font-sans);          /* §11.3 (PULSE-278): KPI Inter tabular; mono yalniz .raw */
  font-size: var(--fz-3xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semi);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.hero-card__unit {
  font-size: var(--fz-sm);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  margin-left: 4px;
}

.hero-card__sub {
  font-size: var(--fz-xs);
  color: var(--text-faint);
  margin-top: auto;
}

.hero-card__spark {
  height: 28px;
  margin-top: var(--space-2);
}

/* Semantic variants (left border + matching faint background tint) */
.hero-card--tl       { border-left-color: var(--emerald-500); }
.hero-card--kwh      { border-left-color: var(--teal-500); }
.hero-card--peak     { border-left-color: var(--violet-500); }
.hero-card--line     { border-left-color: var(--sky-500); }
.hero-card--ink      { border-left-color: var(--ink-500); }
.hero-card--amber    { border-left-color: var(--amber-500); }

/* ─────────────────────────────────────────────────────────────────────
   3. SYNC BADGE — 3 freshness states
   ───────────────────────────────────────────────────────────────────── */

.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;   /* §11.3 (PULSE-280): mono yalniz .raw */
  line-height: 1.4;
}
.sync-badge::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.sync-badge--fresh {
  background: var(--emerald-50);
  color: var(--emerald-700);
}
.sync-badge--stale {
  background: var(--amber-50);
  color: var(--amber-700);
}
.sync-badge--never {
  background: var(--ink-100);
  color: var(--ink-500);
}

/* Live pulse dot (auto-poll indicator) */
.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  position: relative;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--emerald-500);
  opacity: 0.4;
  animation: pulse-ring 1.6s var(--ease-out) infinite;
}
.pulse-dot--off {
  background: var(--ink-400);
}
.pulse-dot--off::after { animation: none; opacity: 0; }
@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(2.2);  opacity: 0;   }
}

/* ─────────────────────────────────────────────────────────────────────
   4. SEVERITY BADGE — 3 levels (Kritik / Uyarı / Bilgi)
   ───────────────────────────────────────────────────────────────────── */

.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fz-xs);
  font-weight: var(--fw-semi);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.severity-badge--critical {
  background: var(--red-500);
  color: #ffffff;
}
.severity-badge--warning {
  background: var(--amber-500);
  color: #ffffff;
}
.severity-badge--info {
  background: transparent;
  color: var(--sky-700);
  border: 1px solid var(--sky-500);
}

/* ─────────────────────────────────────────────────────────────────────
   5. RANGE CHIP — Apple-style segmented control
   ───────────────────────────────────────────────────────────────────── */

.range-chips {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.range-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  min-height: 32px;
}
.range-chip:hover { color: var(--text); }
.range-chip[aria-pressed="true"],
.range-chip.is-active {
  background: var(--ink-900);
  color: var(--text-invert);
}
html.dark .range-chip[aria-pressed="true"],
html.dark .range-chip.is-active {
  background: var(--primary);
  color: var(--text-invert);
}

/* ─────────────────────────────────────────────────────────────────────
   6. COMPACT PILL — header-altı tek-satır mono değer
   ───────────────────────────────────────────────────────────────────── */

.compact-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;   /* §11.3 (PULSE-280): mono yalniz .raw */
  font-size: var(--fz-xs);
  color: var(--text);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   7. THREE-LABEL PILL — Tüketim/Pik/Ort. saatlik chart üstü
   ───────────────────────────────────────────────────────────────────── */

.three-label-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 6px var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  font-size: var(--fz-xs);
  color: var(--text-muted);
}
.three-label-pill__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.three-label-pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.three-label-pill__dot--consume { background: var(--teal-500); }
.three-label-pill__dot--peak    { background: var(--violet-500); }
.three-label-pill__dot--avg     { background: var(--sky-500); }
.three-label-pill__value {
  color: var(--text);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;   /* §11.3 (PULSE-280): mono yalniz .raw */
  font-weight: var(--fw-medium);
}

/* ─────────────────────────────────────────────────────────────────────
   8. DRAWER — desktop right-slide, mobile bottom-sheet
   ───────────────────────────────────────────────────────────────────── */

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out);
  z-index: var(--z-overlay);
}
.drawer-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  background: var(--surface);
  box-shadow: var(--shadow-drawer);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transition: transform var(--t-med) var(--ease-out);
}

/* Desktop: right slide-in */
@media (min-width: 768px) {
  .drawer {
    top: 0; right: 0;
    height: 100%;
    width: min(520px, 90vw);
    transform: translateX(100%);
    border-top-left-radius: var(--radius-drawer);
    border-bottom-left-radius: var(--radius-drawer);
  }
  .drawer.is-open { transform: translateX(0); }
}

/* Mobile: bottom-sheet — avoid sticky+dvh trap (feedback_ios_safari_hittest) */
@media (max-width: 767.98px) {
  .drawer {
    left: 0; right: 0; bottom: 0;
    max-height: 88vh;
    transform: translateY(100%);
    border-top-left-radius: var(--radius-drawer);
    border-top-right-radius: var(--radius-drawer);
  }
  .drawer.is-open { transform: translateY(0); }
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline);
}
.drawer__title {
  font-size: var(--fz-lg);
  font-weight: var(--fw-semi);
}
.drawer__close {
  background: transparent;
  border: none;
  padding: 8px;
  border-radius: var(--radius-button);
  cursor: pointer;
  color: var(--text-muted);
  min-width: 44px; min-height: 44px;
}
.drawer__close:hover { background: var(--surface-2); color: var(--text); }
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────────────────────────────
   9. GANTT ROW — 24sa makine çalışma timeline
   ───────────────────────────────────────────────────────────────────── */

.gantt-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
}
.gantt-row__label {
  font-size: var(--fz-sm);
  color: var(--text);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-row__track {
  position: relative;
  height: 18px;
  background: var(--surface-2);
  border-radius: var(--radius-button);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.gantt-row__bar {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--violet-500);
  opacity: 0.85;
}
.gantt-row__bar--ref { background: var(--ink-300); }

.gantt-legend {
  display: flex;
  gap: var(--space-4);
  font-size: var(--fz-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.gantt-legend__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 4px;
}
.gantt-legend__dot--puant   { background: var(--tou-puant); }
.gantt-legend__dot--gunduz  { background: var(--tou-gunduz); }
.gantt-legend__dot--gece    { background: var(--tou-gece); }
.gantt-legend__dot--makine  { background: var(--violet-500); }

/* ─────────────────────────────────────────────────────────────────────
   10. BAR CHART — kümülatif kWh, violet → teal gradient
   ───────────────────────────────────────────────────────────────────── */

.bar-chart {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 80px;
  padding: var(--space-2) 0;
}
.bar-chart__bar {
  flex: 1;
  background: linear-gradient(to top, var(--teal-500), var(--violet-500));
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   11. GAP OVERLAY — veri boşluğu dashed amber
   ───────────────────────────────────────────────────────────────────── */

.gap-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(245, 158, 11, 0.12) 6px,
    rgba(245, 158, 11, 0.12) 12px
  );
  border: 1px dashed var(--amber-500);
  border-radius: var(--radius-button);
}
.gap-overlay__label {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--amber-50);
  color: var(--amber-700);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fz-xs);
  font-weight: var(--fw-medium);
  pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────────────
   12. BOTTOM NAV — mobile 4+Daha (local & cloud variants)
   ───────────────────────────────────────────────────────────────────── */

.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  justify-content: space-around;
}
@media (max-width: 767.98px) {
  .bottom-nav { display: flex; }
  body.has-bottom-nav { padding-bottom: 70px; }
}
.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 10.5px;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: none;
  min-height: 44px;
  border: none;
  background: transparent;
}
.bottom-nav__item.is-active {
  color: var(--primary);
}
.bottom-nav__item svg {
  width: 22px; height: 22px;
  stroke-width: 2;
}

/* ─────────────────────────────────────────────────────────────────────
   13. KVKK BANNER — min-disclosure pattern (her sayfa dip)
   ───────────────────────────────────────────────────────────────────── */

.kvkk-banner {
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fz-xs);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-8);
}
.kvkk-banner strong {
  color: var(--text);
  font-weight: var(--fw-semi);
}

/* ─────────────────────────────────────────────────────────────────────
   14. PWA INSTALL HINT — dashed mavi pill
   ───────────────────────────────────────────────────────────────────── */

.pwa-install-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--primary);
  border-radius: var(--radius-pill);
  background: var(--primary-bg);
  color: var(--primary);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
}
.pwa-install-hint__close {
  background: transparent;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 2px;
  margin-left: 4px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────
   15. MULTI-GATEWAY CHIP — cloud panel'de seçici
   ───────────────────────────────────────────────────────────────────── */

.gateway-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.gateway-chip:hover { border-color: var(--primary); }
.gateway-chip[aria-pressed="true"],
.gateway-chip.is-active {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
}

/* ─────────────────────────────────────────────────────────────────────
   16. EMPTY STATE — dashed kart + ikon + CTA
   ───────────────────────────────────────────────────────────────────── */

.empty-state {
  border: 1.5px dashed var(--hairline-strong);
  background: var(--surface-2);
  border-radius: var(--radius-card);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--text-muted);
}
.empty-state__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--space-3);
  color: var(--text-faint);
  stroke-width: 1.5;
}
.empty-state__title {
  font-size: var(--fz-lg);
  font-weight: var(--fw-semi);
  color: var(--text);
  margin-bottom: var(--space-2);
}
.empty-state__body {
  font-size: var(--fz-sm);
  margin-bottom: var(--space-4);
}

/* ─────────────────────────────────────────────────────────────────────
   17. BUTTON — primary + secondary, 44px tap zone (Apple HIG)
   ───────────────────────────────────────────────────────────────────── */

/* hidden ozniteligi .s-btn'in display'ine yenilmesin (PULSE-338: Modbus penceresinde
   ekleme kipinde "Arsivle" gorunuyordu). */
.s-btn[hidden] { display: none; }
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border-radius: var(--radius-button);
  font-family: var(--font-sans);
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
  text-decoration: none;
  user-select: none;
}
.s-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.s-btn--primary {
  background: var(--primary);
  color: var(--primary-fg);
}
.s-btn--primary:hover  { background: var(--primary-hover); }
.s-btn--primary:active { background: var(--primary-active); }

.s-btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--hairline-strong);
}
.s-btn--secondary:hover { background: var(--surface-2); }

.s-btn--ghost {
  background: transparent;
  color: var(--text-muted);
}
.s-btn--ghost:hover { background: var(--surface-2); color: var(--text); }

.s-btn--sm  { min-height: 36px; padding: 6px 12px; font-size: var(--fz-xs); }

/* ─────────────────────────────────────────────────────────────────────
   18. ANOMALY BANNER — header altı amber strip
   ───────────────────────────────────────────────────────────────────── */

.anomaly-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--amber-50);
  border: 1px solid var(--amber-500);
  border-radius: var(--radius-card);
  color: var(--amber-700);
  font-size: var(--fz-sm);
  line-height: var(--lh-snug);
}
.anomaly-banner__icon {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  stroke-width: 2;
}
.anomaly-banner__body { flex: 1; }
.anomaly-banner__cta {
  font-weight: var(--fw-semi);
  color: var(--amber-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────
   19. TOU SLICE — 3-tier dilim göstergesi
   ───────────────────────────────────────────────────────────────────── */

.tou-slice {
  display: flex;
  height: 14px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.tou-slice__seg            { height: 100%; }
.tou-slice__seg--puant     { background: var(--tou-puant); }
.tou-slice__seg--gunduz    { background: var(--tou-gunduz); }
.tou-slice__seg--gece      { background: var(--tou-gece); }

/* ─────────────────────────────────────────────────────────────────────
   20. TABLE — base data table
   ───────────────────────────────────────────────────────────────────── */

.s-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fz-sm);
}
.s-table thead th {
  text-align: left;
  font-weight: var(--fw-semi);
  font-size: var(--fz-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0;
}
.s-table tbody td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  vertical-align: middle;
}
.s-table tbody tr:hover td { background: var(--surface-2); }
.s-table td.num,
.s-table th.num { text-align: right; font-variant-numeric: tabular-nums; }   /* §11.3: mono yok */

/* ─────────────────────────────────────────────────────────────────────
   21. ALARM ROW — sağ sütun listesi (desktop)
   ───────────────────────────────────────────────────────────────────── */

.alarm-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.alarm-row:hover { background: var(--surface-2); }
.alarm-row__rail {
  width: 3px;
  height: 100%;
  min-height: 36px;
  border-radius: var(--radius-pill);
  background: var(--ink-300);
}
.alarm-row--critical .alarm-row__rail { background: var(--red-500); }
.alarm-row--warning  .alarm-row__rail { background: var(--amber-500); }
.alarm-row--info     .alarm-row__rail { background: var(--sky-500); }

.alarm-row__title {
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
}
.alarm-row__meta {
  font-size: var(--fz-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.alarm-row__time {
  font-size: var(--fz-xs);
  color: var(--text-faint);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;   /* §11.3 (PULSE-280): mono yalniz .raw */
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
   22. FORM CONTROLS — 44px tap-zone (Apple HIG mobil)
   ───────────────────────────────────────────────────────────────────── */

.s-input,
.s-select,
.s-textarea {
  display: block;
  width: 100%;
  padding: 10px var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-button);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fz-sm);
  min-height: 44px;
  transition: border-color var(--t-fast) var(--ease-out);
}
.s-input:focus,
.s-select:focus,
.s-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}
.s-textarea { min-height: 88px; resize: vertical; }

/* ─────────────────────────────────────────────────────────────────────
   23. FOUC GUARD — paired with theme.css; inline <script> sets .dark
       on <html> before first paint. CSS hides body until ready.
   ───────────────────────────────────────────────────────────────────── */

html.theme-loading body { visibility: hidden; }
html:not(.theme-loading) body { visibility: visible; }

/* ─────────────────────────────────────────────────────────────────────
   24. MOBILE OVERFLOW GUARD — REV-54 Faz 1 saha smoke (11 May 2026):
   Onur "gövde sola çekili, sağda boşluk" raporu. Sebep: bottom-nav fixed
   left:0 right:0 + main flex-1 padding kombinasyonu viewport'tan dışarı
   taşma yapıyor. Fix: html/body overflow-x kilidi + main min-width:0 +
   bottom-nav box-sizing border-box. Mobile-only (≤767.98px).
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  main {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .bottom-nav {
    box-sizing: border-box;
    max-width: 100vw;
  }
  /* Page header'da long span'lerin satır kırılmasına izin ver */
  .overview-header,
  header.overview-header {
    min-width: 0;
  }
  .overview-header h1 {
    min-width: 0;
    word-break: break-word;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   25. K-055 ARAYUZ STANDARDI (IBM Carbon referansli, PULSE-253, 14 Eki 2026)
   Doküman: docs/spec/ARAYUZ_STANDARDI.md. Yeni/degisen sayfalar bu
   siniflari kullanir; sayfa <style> blogunda ayni bilesen yeniden yazilmaz.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tehlike dugmesi (Carbon danger-tertiary): geri alinamaz/yikici islem, onay sorar */
.s-btn--danger { background: var(--surface); color: var(--red-600); border: 1px solid var(--red-100); }
.s-btn--danger:hover { background: var(--red-50); }

/* Bolum basligi: baslik solda, eylemler sagda. Ustte 32, altta 16 px (§2). */
.s-section-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-8) 0 var(--space-4); }
.s-section-head--top { margin-top: 0; }   /* sayfanin/kartin en ustundeki baslik */
.s-section-head h2 { font-size: var(--fz-lg); font-weight: var(--fw-semi); margin: 0; color: var(--text); }
.s-section-head .s-sub { font-size: var(--fz-sm); color: var(--text-muted); }
.s-section-head .s-actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Pencere (native <dialog>): sabit baslik + kayan govde + sabit alt cubuk */
dialog.s-dialog { margin: auto; border: 0; padding: 0; border-radius: var(--radius-card);
  width: min(480px, 94vw); max-height: 90vh; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-modal); }
dialog.s-dialog--wide { width: min(560px, 94vw); }
dialog.s-dialog--detail { width: min(720px, 94vw); }
dialog.s-dialog::backdrop { background: rgba(15, 23, 42, .45); }
dialog.s-dialog > form { display: flex; flex-direction: column; max-height: 90vh; margin: 0; }
.s-dialog__head { padding: var(--space-5) var(--space-5) var(--space-2); }
.s-dialog__head h3 { margin: 0; font-size: var(--fz-md); font-weight: var(--fw-semi); }
.s-dialog__head p { margin: 4px 0 0; font-size: var(--fz-sm); color: var(--text-muted); line-height: 1.45; }
.s-dialog__body { padding: var(--space-3) var(--space-5) var(--space-4); display: flex;
  flex-direction: column; gap: var(--space-4); overflow-y: auto; --ctl-h: 40px; }
.s-dialog__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--hairline); }
.s-dialog__error { margin-right: auto; color: var(--red-600); font-size: var(--fz-sm); }
.s-dialog__error:empty { display: none; }

/* Form alani: etiket ustte, yardimci metin etiketin altinda, kutu tam genislik */
.s-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fz-sm);
  font-weight: var(--fw-semi); color: var(--text); }
.s-field__help { font-weight: var(--fw-regular); color: var(--text-muted); font-size: var(--fz-xs); }
.s-field .s-input, .s-field .s-select { width: 100%; box-sizing: border-box; }
.s-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 480px) { .s-grid-2 { grid-template-columns: 1fr; } }

/* Durum etiketi (Carbon tag): metin + renk birlikte */
.s-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fz-xs);
  font-weight: var(--fw-semi); padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text); white-space: nowrap; }
.s-tag--ok { background: var(--emerald-50); color: var(--emerald-700); }
.s-tag--warn { background: var(--amber-50); color: var(--amber-700); }
.s-tag--err { background: var(--red-50); color: var(--red-700); }
.s-tag--info { background: var(--primary-bg); color: var(--primary); }

/* Satir ici bildirim (Carbon inline notification) */
.s-notice { font-size: var(--fz-sm); line-height: 1.45; padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--primary); background: var(--primary-bg); border-radius: 4px; color: var(--text); }
.s-notice--warn { border-left-color: var(--amber-500); background: var(--amber-50); color: var(--amber-700); }
.s-notice--err { border-left-color: var(--red-600); background: var(--red-50); color: var(--red-700); }

/* Veri tablosu: 12 px baslik, 48 px satir; mobilde satir kartina doner (data-label) */
.s-table { width: 100%; border-collapse: collapse; font-size: var(--fz-sm); }
.s-table th { text-align: left; font-size: var(--fz-xs); font-weight: var(--fw-semi); color: var(--text-muted);
  padding: var(--space-2) var(--space-4); background: var(--surface-2); border-bottom: 1px solid var(--hairline); }
.s-table td { padding: var(--space-3) var(--space-4); height: 48px; border-bottom: 1px solid var(--hairline);
  vertical-align: middle; }
.s-table tr:last-child td { border-bottom: 0; }
.s-table td.s-table__act { text-align: right; white-space: nowrap; }
.s-table td.s-table__act .s-btn + .s-btn { margin-left: var(--space-2); }
@media (max-width: 671.98px) {
  .s-table--stack thead { display: none; }
  .s-table--stack tr { display: block; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); }
  .s-table--stack td { display: block; height: auto; padding: 2px 0; border: 0; }
  .s-table--stack td[data-label]::before { content: attr(data-label) " "; color: var(--text-muted); }
  .s-table--stack td.s-table__act { text-align: left; margin-top: var(--space-2); }
}

/* Bos durum: ne olmadigi + ne yapilacagi */
.s-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--fz-sm); }

/* ─────────────────────────────────────────────────────────────────────
   PULSE-277 (K-071, ARAYUZ_STANDARDI §11) — sadelestirme altyapisi
   ───────────────────────────────────────────────────────────────────── */
/* §11.3 sayi + birim: buyuk sayi 600, birim 400; tabular rakam, mono yalniz .raw */
.num  { font-variant-numeric: tabular-nums; font-weight: 600; }
.unit { font-weight: 400; color: var(--text-muted); font-size: .8em; }
.raw  { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-variant-numeric: tabular-nums; }

/* §11.6 Carbon alt cizgili sekme */
.s-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--hairline); overflow-x: auto;
          scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-4); }
.s-tabs::-webkit-scrollbar { display: none; }
.s-tab { flex: 0 0 auto; height: 48px; padding: 0 16px; background: none; border: 0;
         border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
         font: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.s-tab:hover { color: var(--text); background: var(--surface-sunk); }
.s-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
.s-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.s-tabs--cok .s-tab { display: none; }
.s-tabs--cok .s-tabs__sel { margin: 6px 0; max-width: 320px; }

/* §11.1 / B5-B6-B8 pencere: sabit sag ust ×, baslik yardim ? (dialog.js ekler) */
.s-dialog__head { position: relative; padding-right: 56px; }
.s-dialog__x, .s-dialog__q { position: absolute; top: 12px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.s-dialog__x { right: 12px; }
.s-dialog__q { right: 50px; font-size: 14px; font-weight: 600; }
.s-dialog__x:hover, .s-dialog__q:hover { background: var(--surface-sunk); color: var(--text); }

/* Destek dugmesi (nav.js pagehead) */
.pagehead { position: relative; }
.pagehead__help { margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: grid; place-items: center; }
.pagehead__help:hover { background: var(--surface-sunk); color: var(--text); }

/* Yardim paneli */
dialog.s-dialog--yardim { width: min(640px, 94vw); }
.sv-yardim-icerik { font-size: var(--fz-sm); line-height: 1.6; }
.sv-yardim-icerik h2 { font-size: var(--fz-md); margin: var(--space-4) 0 var(--space-2); }
.sv-yardim-icerik h3 { font-size: var(--fz-sm); margin: var(--space-3) 0 var(--space-1); }
.sv-yardim-icerik p, .sv-yardim-icerik li { margin: 0 0 var(--space-2); }
.sv-yardim-icerik code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .9em; }
.sv-yardim-bos, .sv-yardim-yetki { color: var(--text-muted); font-size: var(--fz-sm); }
.sv-yardim-destek { border-top: 1px solid var(--hairline); margin-top: var(--space-4); padding-top: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2); }
.sv-yardim-destek h4 { margin: 0; font-size: var(--fz-sm); font-weight: 600; }
.sv-yardim-ek { font-size: var(--fz-xs); color: var(--text-faint); }
.sv-yardim-msg { font-size: var(--fz-xs); color: var(--text-muted); }
.sv-yardim-msg.ok { color: var(--emerald-700); } .sv-yardim-msg.err { color: var(--red-600); }
.sv-yardim-yukleniyor { height: 48px; border-radius: var(--radius-card); background: var(--surface-sunk); }
/* §11.7 mobil: tam ekran */
@media (max-width: 671px) {
  dialog.s-dialog--yardim { width: 100vw; height: 100dvh; max-height: 100dvh; max-width: none; border-radius: 0; margin: 0; }
  dialog.s-dialog--yardim > form { max-height: 100dvh; height: 100dvh; }
  dialog.s-dialog--yardim .s-dialog__body { flex: 1; overflow: auto; }
}
/* §11.5: sayfa basligina tasinan eylem dugmeleri (Destek dugmesinin solunda) */
.pagehead__actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.pagehead__actions + .pagehead__help { margin-left: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   §26 PULSE-348 / K-110 — yuzey, gosterge, sade tablo, durum noktasi, rozet,
   sagdan acilan panel. Ayrinti: docs/spec/ARAYUZ_STANDARDI.md §12.
   Kural: kart golgesiz, 1 px kenar; renk yalniz durum anlami tasir.
   ═══════════════════════════════════════════════════════════════════════ */
.s-surface { background: var(--surface); border: 1px solid var(--surface-border);
  border-radius: var(--radius-surface); min-width: 0; }
.s-surface__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-4) var(--space-3); }
.s-surface__head h2 { margin: 0; font-size: var(--fz-md); font-weight: var(--fw-semi); }
.s-surface__sub { font-size: var(--fz-xs); color: var(--text-muted); }
.s-surface__body { padding: 0 var(--space-4) var(--space-4); }
.s-surface__foot { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline);
  font-size: var(--fz-xs); color: var(--text-muted); }
.s-surface > .s-tablo-kutu { border-top: 1px solid var(--hairline); }

/* Gosterge kartlari: etiket, buyuk sayi, tek ikincil satir */
.s-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1100px) { .s-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .s-kpis { grid-template-columns: 1fr; } }
.s-kpi { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.s-kpi__label { font-size: var(--fz-xs); color: var(--text-muted); font-weight: var(--fw-medium); }
.s-kpi__label a { color: inherit; text-decoration: none; }
.s-kpi__label a:hover { color: var(--primary); }
.s-kpi__value { font-size: 26px; font-weight: var(--fw-semi); line-height: 1.2;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.s-kpi__value .unit { font-size: var(--fz-md); font-weight: var(--fw-regular); color: var(--text-muted); }
.s-kpi__value.sm { font-size: var(--fz-md); color: var(--text-muted); }
.s-kpi__sub { font-size: var(--fz-xs); color: var(--text-muted); }
.s-kpi--err .s-kpi__value { color: var(--status-err); }

/* Sade tablo (Carbon): baslik gri zemin, satir arasi ince cizgi, sayi sutunu saga */
.s-tablo-kutu { overflow-x: auto; }
.s-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.s-tablo th { text-align: left; font-size: var(--fz-xs); font-weight: var(--fw-medium); color: var(--text-muted);
  background: var(--surface-head); padding: 10px var(--space-3); border-bottom: 1px solid var(--surface-border);
  white-space: nowrap; }
.s-tablo td { padding: 11px var(--space-3); border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.s-tablo th:first-child, .s-tablo td:first-child { padding-left: var(--space-4); }
.s-tablo th:last-child, .s-tablo td:last-child { padding-right: var(--space-4); }
.s-tablo tbody tr:last-child td { border-bottom: 0; }
.s-tablo th.v, .s-tablo td.v { text-align: right; font-variant-numeric: tabular-nums; }
.s-tablo td.sil { color: var(--text-muted); }
.s-tablo tr.tik { cursor: pointer; }
.s-tablo tr.tik:hover td { background: var(--surface-2); }
.s-tablo tr.tik:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Durum noktasi ve rozet */
.s-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--status-nodata); }
.s-dot--run { background: var(--status-run); } .s-dot--idle { background: var(--status-idle); }
.s-dot--off { background: var(--status-off); } .s-dot--nodata { background: var(--status-nodata); }
.s-dot--err { background: var(--status-err); } .s-dot--info { background: var(--primary); }
.s-ad { display: inline-flex; align-items: center; gap: var(--space-2); }
.s-rozet { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: var(--fz-xs); font-weight: var(--fw-medium); background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }
.s-rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-rozet--err { background: var(--red-50); color: var(--red-700); }
.s-rozet--warn { background: var(--amber-50); color: var(--amber-700); }
.s-rozet--ok { background: var(--emerald-50); color: var(--emerald-700); }

/* Liste (Dikkat isteyenler vb.): nokta + metin + sag bag */
.s-liste { list-style: none; margin: 0; padding: 0; }
.s-liste li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--hairline); font-size: 13px; line-height: 1.45; }
.s-liste li:first-child { border-top: 0; }
.s-liste .s-dot { margin-top: 5px; }
.s-liste .metin { flex: 1; min-width: 0; }
.s-liste .ek { display: block; font-size: var(--fz-xs); color: var(--text-muted); }
.s-liste a.git { font-size: var(--fz-xs); white-space: nowrap; text-decoration: none; color: var(--primary); }

/* Yatay pay cubugu (hat bazinda vb.) */
.s-cubuk { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.s-cubuk > span { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.s-cubuk--sil > span { background: var(--status-nodata); }

/* Sagdan acilan panel (K-110): ekleme / duzenleme formlari ve ayrinti gorunumu.
 * Yapi: .s-panel-scrim > aside.s-panel > .s-panel__head / .s-panel__body / .s-panel__foot
 * JS: _shared/dialog.js SolveonPanel.ac({...}) (ESC, arka plan tiklamasi, odak). 672 px altinda tam ekran. */
.s-panel-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.32); z-index: calc(var(--z-modal) + 5);
  display: flex; justify-content: flex-end; }
.s-panel { width: min(var(--side-panel-w), 100%); height: 100%; background: var(--surface);
  box-shadow: -8px 0 24px rgba(15,23,42,.12); display: flex; flex-direction: column;
  animation: s-panel-gir var(--t-med) var(--ease-out); }
.s-panel--genis { --side-panel-w: 640px; }
@keyframes s-panel-gir { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.s-panel__head { display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-4); border-bottom: 1px solid var(--hairline); }
.s-panel__head h2 { margin: 0; font-size: var(--fz-lg); font-weight: var(--fw-semi); }
.s-panel__head .s-surface__sub { display: block; margin-top: 2px; }
.s-panel__baslik { flex: 1; min-width: 0; }
.s-panel__x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  color: var(--text-muted); font: inherit; font-size: 20px; line-height: 1; display: grid; place-items: center; }
.s-panel__x:hover { background: var(--surface-2); color: var(--text); }
.s-panel__body { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-6); }
.s-panel__bolum { display: flex; flex-direction: column; gap: var(--space-3); }
.s-panel__bolum > h3 { margin: 0; font-size: var(--fz-xs); font-weight: var(--fw-semi); color: var(--text-muted);
  letter-spacing: .04em; text-transform: uppercase; }
.s-panel__foot { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-6); border-top: 1px solid var(--hairline); background: var(--surface); }
.s-satir { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px;
  padding: 8px 0; border-top: 1px solid var(--hairline); }
.s-satir:first-of-type { border-top: 0; }
.s-satir > span:first-child { color: var(--text-muted); }
.s-satir > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 671px) {
  .s-panel { width: 100%; }
  .s-panel__head, .s-panel__body, .s-panel__foot { padding-left: var(--space-4); padding-right: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .s-panel { animation: none; } }