/* XRE Sosyal Ağ Paneli — "tesisat planı" teması
   Mürekkep laciverti kenar çubuğu, çizim kâğıdı zemin, kobalt plan çizgileri.
   Kablolar: yeşil = çalışıyor, kırmızı = sorun, gri kesikli = veri yok. */

:root {
  color-scheme: light;
  --ink: #16233b;          /* kenar çubuğu, başlıklar */
  --ink-2: #22324f;
  --paper: #f1f3f2;        /* sayfa zemini */
  --surface: #ffffff;
  --surface-2: #f5f7f8;
  --plan: #f6f8fc;         /* çizim alanı */
  --line: #dde2e7;
  --line-strong: #c6cdd6;
  --text: #121a2a;
  --text-2: #4a5568;
  --muted: #7b8594;
  --cobalt: #2f5bea;       /* eylem rengi + plan çizgileri */
  --cobalt-ink: #ffffff;
  --cobalt-wash: rgba(47, 91, 234, 0.08);
  --live: #1f9d55;
  --live-ink: #137a40;
  --live-wash: rgba(31, 157, 85, 0.11);
  --fault: #d64545;
  --fault-ink: #b42f2f;
  --fault-wash: rgba(214, 69, 69, 0.10);
  --amber: #e59a1b;
  --amber-ink: #8f5c00;
  --amber-wash: rgba(229, 154, 27, 0.14);
  --idle: #a3acb9;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --grid: #e4e7ea;
  --shadow: 0 1px 0 rgba(18, 26, 42, 0.04), 0 8px 24px -12px rgba(18, 26, 42, 0.12);
  --radius: 14px;
  --font-display: "Archivo", "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #0a101b; --ink-2: #131c2c; --paper: #0d1420; --surface: #141d2c; --surface-2: #1a2537;
    --plan: #101a2a; --line: #243046; --line-strong: #31405a; --text: #e8edf5; --text-2: #b4bfd0;
    --muted: #8391a7; --cobalt: #6e8cff; --cobalt-ink: #0a101b; --cobalt-wash: rgba(110, 140, 255, 0.12);
    --live: #2fbf6c; --live-ink: #4fd486; --live-wash: rgba(47, 191, 108, 0.14);
    --fault: #ef5f5f; --fault-ink: #ff8a8a; --fault-wash: rgba(239, 95, 95, 0.14);
    --amber-ink: #f5b84a; --amber-wash: rgba(229, 154, 27, 0.16); --idle: #5d6a80;
    --series-1: #3987e5; --series-2: #d95926; --grid: #222d40; --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #0a101b; --ink-2: #131c2c; --paper: #0d1420; --surface: #141d2c; --surface-2: #1a2537;
  --plan: #101a2a; --line: #243046; --line-strong: #31405a; --text: #e8edf5; --text-2: #b4bfd0;
  --muted: #8391a7; --cobalt: #6e8cff; --cobalt-ink: #0a101b; --cobalt-wash: rgba(110, 140, 255, 0.12);
  --live: #2fbf6c; --live-ink: #4fd486; --live-wash: rgba(47, 191, 108, 0.14);
  --fault: #ef5f5f; --fault-ink: #ff8a8a; --fault-wash: rgba(239, 95, 95, 0.14);
  --amber-ink: #f5b84a; --amber-wash: rgba(229, 154, 27, 0.16); --idle: #5d6a80;
  --series-1: #3987e5; --series-2: #d95926; --grid: #222d40; --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--text); font: 14px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); color: var(--text); margin: 0; }
h1 { font-size: 26px; font-weight: 700; font-stretch: 112%; letter-spacing: -0.015em; line-height: 1.15; }
h2 { font-size: 18px; font-weight: 700; font-stretch: 108%; }
h3 { font-size: 14.5px; font-weight: 650; font-stretch: 104%; }
p { margin: 0 0 8px; }
code { font-family: var(--font-mono); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; overflow-wrap: anywhere; }
.ico { flex: none; vertical-align: -3px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.text-live { color: var(--live-ink); } .text-fault { color: var(--fault-ink); } .text-critical { color: var(--fault-ink); }
.empty { color: var(--muted); padding: 18px 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- İskelet: kenar çubuğu + içerik ------------------------------------------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--ink); color: #c9d3e6; display: flex; flex-direction: column; gap: 22px;
  padding: 22px 14px; position: sticky; top: 0; height: 100vh;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 22px 22px;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 0 8px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand-mark {
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 15px; letter-spacing: 0.04em;
  border: 1.5px solid #fff; padding: 4px 7px 3px; border-radius: 4px; line-height: 1;
}
.brand-text { display: grid; line-height: 1.2; }
.brand-text strong { font-family: var(--font-display); font-stretch: 110%; font-size: 14px; }
.brand-text span { font-family: var(--font-mono); font-size: 10.5px; color: #8e9bb6; letter-spacing: 0.05em; }
.side-nav { display: grid; gap: 2px; }
.side-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: #b9c4d9; font-weight: 500; }
.side-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.side-nav a[aria-current="page"] { background: rgba(255,255,255,0.10); color: #fff; box-shadow: inset 2px 0 0 #7d9bff; }
.side-nav .nav-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; background: var(--fault); color: #fff; border-radius: 999px; padding: 0 7px; }
.side-section { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #6f7d99; padding: 0 10px; margin-top: 6px; }
.side-foot { margin-top: auto; display: grid; gap: 8px; }
.auto-pill { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #c9d3e6; border: 1px solid rgba(255,255,255,0.12); }
.auto-pill:hover { text-decoration: none; background: rgba(255,255,255,0.06); }
.auto-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #8e9bb6; flex: none; }
.auto-pill.on .dot { background: #2fbf6c; box-shadow: 0 0 0 3px rgba(47,191,108,0.25); }
.auto-pill.off { color: #ffb4b4; border-color: rgba(239,95,95,0.35); }
.auto-pill.off .dot { background: #ef5f5f; }
.automation-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.automation-card.is-on { border-left: 4px solid var(--live); }
.automation-card.is-off { border-left: 4px solid var(--fault); }
.automation-card .card-head { margin-bottom: 0; }
.side-foot .who { font-size: 12px; color: #8e9bb6; padding: 0 10px; }
.side-foot button { width: 100%; justify-content: flex-start; background: transparent; color: #b9c4d9; border-color: rgba(255,255,255,0.12); }
.side-foot button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.main { min-width: 0; }
.content { max-width: 1320px; margin: 0 auto; padding: 28px 32px 48px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head p { margin: 6px 0 0; color: var(--text-2); max-width: 70ch; }
.crumb { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; margin-bottom: 10px; color: var(--muted); }

/* --- Kartlar ve ızgaralar --------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.layout-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.layout-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.stack { display: grid; gap: 16px; min-width: 0; }
.stack > .card + .card { margin-top: 0; }

/* --- Ölçüm şeridi (KPI) ----------------------------------------------------------------- */
.meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; box-shadow: var(--shadow); overflow: hidden; }
.meter > div { padding: 16px 20px; border-left: 1px solid var(--line); display: grid; gap: 4px; align-content: start; }
.meter > div:first-child { border-left: 0; }
.meter .label { font-size: 12.5px; color: var(--text-2); display: flex; gap: 6px; align-items: center; }
.meter .value { font-family: var(--font-display); font-stretch: 112%; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.meter .value small { font-size: 16px; color: var(--muted); font-weight: 500; }
.meter .hint { font-size: 12px; color: var(--muted); }
.meter .alert { background: linear-gradient(var(--fault-wash), var(--fault-wash)); }
.meter .alert .value { color: var(--fault-ink); }

/* --- Rozetler -------------------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px 2px 7px; border-radius: 999px; white-space: nowrap; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); line-height: 1.6; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--idle); flex: none; }
.badge-good { background: var(--live-wash); color: var(--live-ink); border-color: transparent; } .badge-good .dot { background: var(--live); }
.badge-warning { background: var(--amber-wash); color: var(--amber-ink); border-color: transparent; } .badge-warning .dot { background: var(--amber); }
.badge-critical { background: var(--fault-wash); color: var(--fault-ink); border-color: transparent; } .badge-critical .dot { background: var(--fault); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 1px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); font-weight: 500; }

/* --- Avatar ---------------------------------------------------------------------------------- */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; flex: none; font-family: var(--font-display); font-stretch: 115%; font-weight: 800; color: #fff; background: linear-gradient(140deg, #2f5bea, #16233b); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-xs { width: 22px; height: 22px; font-size: 10px; }
.avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.avatar-md { width: 42px; height: 42px; font-size: 16px; }
.avatar-lg { width: 96px; height: 96px; font-size: 36px; }
.ring { padding: 3px; border-radius: 50%; display: inline-grid; background: var(--idle); }
.ring > .avatar { box-shadow: 0 0 0 2.5px var(--surface); }
.ring-good { background: var(--live); } .ring-warning { background: var(--amber); } .ring-critical { background: var(--fault); }

/* --- Bağlantı panosu (imza öğe): grup sütunları + hesap kartları + kablolar ---------- */
.board-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.board-canvas {
  position: relative; border-radius: 12px; border: 1px solid var(--line); overflow: hidden;
  background-color: var(--plan);
  background-image:
    linear-gradient(var(--cobalt-wash) 1px, transparent 1px),
    linear-gradient(90deg, var(--cobalt-wash) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--cobalt) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cobalt) 4%, transparent) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
.board-caption { position: absolute; top: 10px; left: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.board-groups { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 250px)); justify-content: center; gap: 48px 120px; padding: 48px 40px 40px; pointer-events: none; }
.board-groups .group { pointer-events: auto; border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 12px 14px 16px; align-self: start; }
.board-groups .group.wide { grid-column: 1 / -1; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px 10px; }
.group-head h3 { font-size: 12.5px; font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.04em; background: var(--plan); padding: 0 4px; margin-left: -4px; }
.group-head .mono { background: var(--plan); padding: 0 4px; white-space: nowrap; }
.group-head .mono { font-size: 11px; color: var(--muted); }
.group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.group.wide .group-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 80px; }
.acct-node { position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s; }
.acct-node::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--idle); }
.acct-node.h-good::before { background: var(--live); } .acct-node.h-warning::before { background: var(--amber); }
.acct-node.h-critical::before { background: var(--fault); }
.acct-node.h-critical { border-color: color-mix(in srgb, var(--fault) 50%, var(--line-strong)); background: linear-gradient(var(--fault-wash), var(--fault-wash)), var(--surface); }
.acct-node.is-focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-wash), var(--shadow); }
.acct-node:hover { border-color: var(--cobalt); transform: translateY(-1px); }
.acct-link { display: flex; align-items: center; gap: 11px; padding: 15px 16px 15px 18px; color: var(--text); min-width: 0; }
.acct-link:hover { text-decoration: none; }
.acct-name { font-weight: 650; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-logo { flex: none; display: block; }
.port { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.port-l { left: -5.5px; } .port-r { right: -5.5px; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
.wire { transition: opacity 0.2s; }
.wire path.sheath, .wire path.core { fill: none; stroke-linecap: round; pointer-events: none; }
.wire path.sheath { stroke-width: 6; }
.wire path.core { stroke-width: 1.8; }
.wire path.hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: help; }
.wire.st-ok path.sheath { stroke: var(--live); } .wire.st-ok path.core { stroke: color-mix(in srgb, var(--live) 40%, white); }
.wire.st-broken path.sheath { stroke: var(--fault); } .wire.st-broken path.core { stroke: color-mix(in srgb, var(--fault) 40%, white); }
.wire.st-idle path.sheath, .wire.st-off path.sheath { stroke: var(--idle); stroke-width: 2.5; stroke-dasharray: 2 7; }
.wire.st-idle path.core, .wire.st-off path.core { display: none; }
.wire .spark { fill: #fff; stroke: var(--live); stroke-width: 1.5; pointer-events: none; }
.wire .fault-mark circle { fill: var(--surface); stroke: var(--fault); stroke-width: 2; }
.wire .fault-mark path { stroke: var(--fault); stroke-width: 2.2; stroke-linecap: round; }
.board.focusing .wire:not(.hot) { opacity: 0.08; }
.board.focusing .acct-node:not(.hot) { opacity: 0.45; }
.board.only-problems .wire:not(.st-broken) { display: none; }
@media (prefers-reduced-motion: reduce) { .wire .spark { display: none; } }
.board-note { margin: 10px 0 0; }
.net-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.net-legend span { display: inline-flex; align-items: center; gap: 7px; }
.net-legend i { width: 22px; height: 0; border-top: 4px solid var(--idle); border-radius: 2px; display: inline-block; }
.net-legend i.ok { border-color: var(--live); } .net-legend i.broken { border-color: var(--fault); }
.net-legend i.idle { border-top: 3px dotted var(--idle); }
.net-legend b { font-family: var(--font-mono); font-weight: 600; color: var(--text); }

/* Matris */
.matrix { border-collapse: separate; border-spacing: 4px; width: auto; }
.matrix th { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); font-weight: 500; border: 0; padding: 4px 6px; white-space: nowrap; }
.matrix th.col { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; height: 120px; vertical-align: bottom; }
.matrix td { border: 0; padding: 0; }
.cell { width: 46px; height: 34px; border-radius: 7px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; }
.cell-ok { background: var(--live-wash); color: var(--live-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--live) 50%, transparent); }
.cell-broken { background: var(--fault-wash); color: var(--fault-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fault) 55%, transparent); }
.cell-idle, .cell-off { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.cell-self { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, transparent 4px 8px); }

/* --- Hesap kartları (profil ızgarası) ------------------------------------------------------------ */
.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.profile-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.profile-card:hover { border-color: var(--line-strong); }
.profile-card .band { height: 46px; background-color: var(--plan); background-image: linear-gradient(var(--cobalt-wash) 1px, transparent 1px), linear-gradient(90deg, var(--cobalt-wash) 1px, transparent 1px); background-size: 14px 14px; border-bottom: 1px solid var(--line); }
.profile-card.health-critical .band { background-color: var(--fault-wash); }
.profile-card .who { display: flex; gap: 12px; align-items: flex-end; padding: 0 16px; margin-top: -26px; }
.profile-card .who .ring { background: var(--surface); padding: 3px; }
.profile-card .names { min-width: 0; padding-bottom: 2px; }
.profile-card .names a { font-weight: 650; color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card .names span { font-size: 12.5px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card .status { padding: 10px 16px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.profile-card .stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 16px 0; border: 1px solid var(--line); border-radius: 10px; }
.profile-card .stats div { padding: 8px 10px; border-left: 1px solid var(--line); }
.profile-card .stats div:first-child { border-left: 0; }
.profile-card .stats dt { font-size: 11px; color: var(--muted); }
.profile-card .stats dd { margin: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.profile-card .foot { padding: 12px 16px 14px; font-size: 12px; color: var(--muted); margin-top: auto; overflow-wrap: anywhere; }
.profile-card.add { border-style: dashed; background: transparent; box-shadow: none; display: grid; place-items: center; min-height: 220px; text-align: center; color: var(--text-2); cursor: pointer; }
.profile-card.add:hover { background: var(--surface); }
.compact-accounts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.compact-accounts li a { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); }
.compact-accounts li a:hover { background: var(--surface-2); text-decoration: none; }
.compact-accounts .meta { min-width: 0; display: grid; }
.compact-accounts .meta strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-accounts .meta span { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }

/* --- Profil sayfası ----------------------------------------------------------------------------- */
.profile-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 16px; }
.profile-hero .band { height: 92px; background-color: var(--plan); background-image: linear-gradient(var(--cobalt-wash) 1px, transparent 1px), linear-gradient(90deg, var(--cobalt-wash) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--cobalt) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--cobalt) 4%, transparent) 1px, transparent 1px); background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; border-bottom: 1px solid var(--line); }
.profile-hero .head { display: flex; gap: 20px; padding: 0 24px; margin-top: -48px; align-items: flex-end; flex-wrap: wrap; }
.profile-hero .head .ring { background: var(--surface); padding: 4px; }
.profile-hero .ident { flex: 1; min-width: 220px; padding-bottom: 4px; }
.profile-hero .ident h1 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.profile-hero .handle { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; }
.ident-meta { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.ident-meta .sync { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
.ident-meta .sync b { font-family: var(--font-mono); font-weight: 600; color: var(--text-2); }
.group-title { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 12px; }
.group-title:first-of-type { margin-top: 0; }
.group-title h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; font-stretch: 115%; }
.profile-hero .bio { padding: 12px 24px 0; color: var(--text-2); max-width: 80ch; white-space: pre-line; }
.profile-hero .actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; }
.profile-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 18px; }
.profile-stats > div { padding: 14px 20px; border-left: 1px solid var(--line); }
.profile-stats > div:first-child { border-left: 0; }
.profile-stats dt { font-size: 12px; color: var(--muted); }
.profile-stats dd { margin: 2px 0 0; font-family: var(--font-display); font-stretch: 110%; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.profile-stats dd small { font-family: var(--font-mono); font-size: 12px; font-weight: 600; margin-left: 4px; }
.delta-up { color: var(--live-ink); } .delta-down { color: var(--fault-ink); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 14px; color: var(--text-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--text); border-color: var(--cobalt); }

/* Gönderi ızgarası */
.post-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.post-thumb { aspect-ratio: 1 / 1; background: var(--surface-2); position: relative; display: block; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.post-card:hover .post-thumb img { transform: scale(1.03); }
.post-thumb .placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); background-color: var(--plan); background-image: linear-gradient(var(--cobalt-wash) 1px, transparent 1px), linear-gradient(90deg, var(--cobalt-wash) 1px, transparent 1px); background-size: 18px 18px; }
.post-thumb .chip { position: absolute; top: 10px; left: 10px; background: rgba(10, 16, 27, 0.72); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; display: inline-flex; gap: 5px; align-items: center; backdrop-filter: blur(4px); }
.post-thumb .chip.right { left: auto; right: 10px; }
.post-body { padding: 12px 14px; display: grid; gap: 6px; }
.post-title { font-weight: 650; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); }
.post-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.post-metrics { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); }
.post-metrics span { display: inline-flex; gap: 5px; align-items: center; }
.post-net { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); margin-top: auto; font-size: 12px; color: var(--muted); }
.stacked { display: flex; }
.stacked .ring { margin-left: -6px; padding: 2px; } .stacked .ring:first-child { margin-left: 0; }
.stacked .ring > .avatar { box-shadow: 0 0 0 2px var(--surface); }
.ring-pending { background: var(--idle); }

/* Bağlantı listesi (profil) */
.link-rows { list-style: none; margin: 0; padding: 0; }
.link-rows li { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.link-rows li:first-child { border-top: 0; }
.link-rows .peer { display: flex; gap: 10px; align-items: center; min-width: 0; font-weight: 600; }
.link-dir { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.wire { flex: none; width: 46px; height: 0; border-top: 4px solid var(--idle); border-radius: 3px; position: relative; }
.wire.ok { border-color: var(--live); } .wire.broken { border-color: var(--fault); } .wire.idle, .wire.off { border-top: 3px dotted var(--idle); }

/* --- Aktivite akışı -------------------------------------------------------------------------------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed-card .feed { max-height: 760px; overflow-y: auto; margin: 0 -8px; padding: 0 8px; }
.event { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.event:first-child { border-top: 0; }
.event-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text-2); }
.kind-like .event-icon { background: color-mix(in srgb, var(--series-1) 13%, transparent); color: var(--series-1); }
.kind-comment .event-icon { background: color-mix(in srgb, var(--series-2) 13%, transparent); color: var(--series-2); }
.kind-new_post .event-icon, .kind-post_done .event-icon { background: var(--live-wash); color: var(--live-ink); }
.kind-report .event-icon, .kind-account .event-icon { background: var(--cobalt-wash); color: var(--cobalt); }
.event-warning .event-icon { background: var(--amber-wash); color: var(--amber-ink); }
.event-error .event-icon { background: var(--fault-wash); color: var(--fault-ink); }
.event-body { min-width: 0; flex: 1; }
.event-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.event-head time { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; color: var(--muted); }
.handle { font-weight: 650; color: var(--text); }
.event-msg { color: var(--text-2); overflow-wrap: anywhere; font-size: 13px; }
.post-link { font-size: 12px; margin-left: 4px; white-space: nowrap; display: inline-flex; gap: 3px; align-items: center; }
.live-dot { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--live-ink); display: inline-flex; align-items: center; gap: 7px; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .live-dot::before { animation: none; } }

/* --- İlerleme ------------------------------------------------------------------------------------- */
.progress { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-2); margin: 6px 0 4px; }
.seg { display: block; height: 100%; }
.seg-good { background: var(--live); } .seg-critical { background: var(--fault); } .seg-muted { background: var(--line-strong); }
.progress-legend { display: flex; gap: 14px; font-size: 12px; flex-wrap: wrap; font-family: var(--font-mono); }

/* --- Grafikler ------------------------------------------------------------------------------------ */
.chart { margin: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; font-size: 12.5px; color: var(--text-2); }
.legend li { display: flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.swatch.s1, .chart-svg .s1 { background: var(--series-1); fill: var(--series-1); }
.swatch.s2, .chart-svg .s2 { background: var(--series-2); fill: var(--series-2); }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .grid { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-svg .tick { fill: var(--muted); font-size: 10.5px; font-family: var(--font-mono); }
.chart-svg .hit { fill: transparent; }
.chart-svg .bar:hover .hit, .chart-svg .pt:hover .hit { fill: var(--cobalt-wash); }
.chart-svg .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; }
.chart-svg .area { fill: color-mix(in srgb, var(--series-1) 10%, transparent); }
.chart-svg .pt circle { fill: var(--surface); stroke: var(--series-1); stroke-width: 2; opacity: 0; }
.chart-svg .pt:hover circle, .chart-svg .pt:last-of-type circle { opacity: 1; }
#tooltip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: #fff; font-size: 12px; font-family: var(--font-mono); padding: 7px 10px; border-radius: 7px; white-space: pre; transform: translate(-50%, calc(-100% - 12px)); box-shadow: 0 6px 20px rgba(0,0,0,0.25); max-width: 90vw; }

/* --- Tablolar ------------------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
thead th { border-top: 0; font-size: 11.5px; color: var(--muted); font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
td.num, th.num { text-align: right; }
td.actions { text-align: right; white-space: nowrap; }
tr.zero td { color: var(--muted); }
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.plain-list li:first-child { border-top: 0; }
.comment-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.comment-list li.inactive .comment-text { color: var(--muted); text-decoration: line-through; }

/* --- Formlar ve butonlar ------------------------------------------------------------------------------ */
form { margin: 0; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
label .muted { font-weight: 400; }
label.check { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--text); }
input, select, textarea { font: inherit; font-weight: 400; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px; padding: 9px 11px; width: 100%; min-width: 0; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cobalt); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--cobalt-wash); border-color: var(--cobalt); }
.form-actions { display: flex; gap: 8px; }
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.filters label { min-width: 170px; }
.btn { font: inherit; font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--cobalt-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--cobalt) 86%, black); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { border-color: var(--line); }
.btn-danger { color: var(--fault-ink); border-color: color-mix(in srgb, var(--fault) 40%, transparent); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seg-ctl { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.seg-ctl a { padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.seg-ctl a[aria-current="true"] { background: var(--ink); color: #fff; }
.seg-ctl a:hover { text-decoration: none; }
.flash { padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; background: var(--live-wash); color: var(--live-ink); border: 1px solid color-mix(in srgb, var(--live) 30%, transparent); }
.flash-error { background: var(--fault-wash); color: var(--fault-ink); border-color: color-mix(in srgb, var(--fault) 30%, transparent); }
.danger-zone { border-color: color-mix(in srgb, var(--fault) 25%, transparent); }
details.add-account > summary { list-style: none; }
details.add-account > summary::-webkit-details-marker { display: none; }
details.add-account[open] > summary { display: none; }

/* --- Rapor ------------------------------------------------------------------------------------------ */
.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.report-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); flex-wrap: wrap; }
.report-list a:hover { border-color: var(--line-strong); text-decoration: none; }
.report-list .figs { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.top-posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }

/* --- Giriş ------------------------------------------------------------------------------------------ */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--ink); background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 24px 24px; }
.login-card { width: 100%; max-width: 380px; display: grid; gap: 16px; padding: 28px; }
.login-card .brand { color: var(--text); padding: 0; margin-bottom: 4px; }
.login-card .brand-mark { border-color: var(--text); }
.login-card .brand-text span { color: var(--muted); }

/* --- Gömülü --------------------------------------------------------------------------------------- */
.embed-body { background: var(--paper); }
.embed-body .content { padding: 18px; }

/* --- Duyarlı ------------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .layout-main, .layout-split { grid-template-columns: minmax(0, 1fr); }
  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-stats > div:nth-child(4) { border-left: 0; }
  .profile-stats > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 10px 16px; overflow-x: auto; }
  .sidebar .brand-text, .side-section, .auto-pill { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #c9d3e6; border: 1px solid rgba(255,255,255,0.12); }
.auto-pill:hover { text-decoration: none; background: rgba(255,255,255,0.06); }
.auto-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #8e9bb6; flex: none; }
.auto-pill.on .dot { background: #2fbf6c; box-shadow: 0 0 0 3px rgba(47,191,108,0.25); }
.auto-pill.off { color: #ffb4b4; border-color: rgba(239,95,95,0.35); }
.auto-pill.off .dot { background: #ef5f5f; }
.automation-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.automation-card.is-on { border-left: 4px solid var(--live); }
.automation-card.is-off { border-left: 4px solid var(--fault); }
.automation-card .card-head { margin-bottom: 0; }
.side-foot .who { display: none; }
  .side-nav { display: flex; gap: 2px; }
  .side-nav a { padding: 8px 10px; white-space: nowrap; }
  .side-nav a span.lbl { display: none; }
  .side-nav a[aria-current="page"] span.lbl { display: inline; }
  .side-foot { margin: 0 0 0 auto; }
  .side-foot button span, .auto-pill span:not(.dot) { display: none; }
  .side-foot { display: flex; gap: 6px; }
  .content { padding: 18px 16px 40px; }
  .meter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meter > div:nth-child(3) { border-left: 0; }
  .meter > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .meter .value { font-size: 24px; }
  .board-groups { gap: 28px; padding: 36px 56px 20px 14px; grid-template-columns: minmax(0, 1fr); }
  .group.wide .group-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .form-grid.two { grid-template-columns: 1fr; }
  .link-rows li { grid-template-columns: 1fr; gap: 6px; }
  .profile-hero .head { padding: 0 16px; }
  .profile-hero .bio { padding: 12px 16px 0; }
  .profile-stats > div { padding: 12px 14px; }
  .profile-stats dd { font-size: 18px; }
  h1 { font-size: 22px; }
  .card { padding: 16px; }
}

@media print {
  .sidebar, .no-print, .btn { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .card, .meter { box-shadow: none; break-inside: avoid; }
}