:root {
  --paper: #f3f5f6;
  --surface: #ffffff;
  --ink: #15202b;
  --muted: #61707f;
  --line: #d8dee3;
  --up: #16805a;
  --down: #b63b2c;
  --action: #2456c9;
  --action-ink: #ffffff;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12181f; --surface: #19212a; --ink: #e6ebef; --muted: #93a1ae;
    --line: #2b3641; --up: #43c08d; --down: #ec7a68; --action: #6f96f2; --action-ink: #0d1520;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--action); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; font-weight: 700; }
button, input, select { font: inherit; color: inherit; }
button {
  border: 1px solid var(--line); background: var(--surface); padding: 0.45rem 0.85rem;
  border-radius: 6px; cursor: pointer; font-weight: 600;
}
button:hover { border-color: var(--muted); }
button:disabled { opacity: 0.5; cursor: progress; }
button.primary { background: var(--action); border-color: var(--action); color: var(--action-ink); }
button.quiet { border-color: transparent; background: transparent; color: var(--muted); }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
input, select {
  border: 1px solid var(--line); background: var(--surface); padding: 0.45rem 0.6rem;
  border-radius: 6px; width: 100%;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }

/* Yerleşim */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.shell.nav-closed { grid-template-columns: 1fr; }
.shell.nav-closed .side { display: none; }
.nav-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem;
  border-radius: 8px; font-weight: 600; margin-bottom: -0.4rem; }
.nav-toggle span { font-size: 0.85rem; }
.shell:not(.nav-closed) .nav-toggle span { display: none; }
.side {
  border-right: 1px solid var(--line); padding: 1.25rem 0.75rem; display: flex; background: var(--surface);
  flex-direction: column; gap: 0.1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; padding: 0 0.6rem 1.1rem; }
.nav-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin: 1.1rem 0.6rem 0.3rem; }
.nav-link {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  padding: 0.45rem 0.6rem; border-radius: 6px; color: var(--ink); text-decoration: none; font-weight: 600;
}
.nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link small { flex: none; }
.nav-link:hover { background: var(--paper); }
.nav-link.on { background: var(--paper); box-shadow: inset 3px 0 0 var(--action); }
.nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem 0.6rem 0; font-size: 0.9rem; }
.nav-foot button { width: 100%; }
.nav-foot .warn { color: var(--down); }
.small { font-size: 0.82rem; }

.main { padding: 1.75rem clamp(1rem, 3vw, 2.25rem) 3rem; max-width: 1320px; width: 100%; display: flex; flex-direction: column; gap: 1.1rem; }
.main.main-wide { max-width: none; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.sec-head h2 { margin: 0; }

.notice { background: var(--surface); border-left: 3px solid var(--action); padding: 0.6rem 0.9rem; margin: 0; }
.error { background: var(--surface); border-left: 3px solid var(--down); padding: 0.6rem 0.9rem; }
.error pre { white-space: pre-wrap; font-size: 0.8rem; margin: 0.5rem 0 0; }

/* Kartlar ve ızgara */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.2rem; min-width: 0; }
.card h2 { font-size: 1rem; margin-bottom: 0.8rem; }
.card-foot { border-top: 1px solid var(--line); margin: 1rem -1.2rem -1.1rem; padding: 0.7rem 1.2rem; font-size: 0.85rem; }
.grid { display: grid; gap: 1.1rem; }
.g-main { grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.count { font-size: 0.8rem; color: var(--muted); font-weight: 600; margin-left: 0.3rem; }

/* Dönem seçici */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg a { padding: 0.35rem 0.8rem; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.88rem; }
.seg a + a { border-left: 1px solid var(--line); }
.seg a.on { background: var(--ink); color: var(--surface); }

/* KPI şeridi */
.trend-card { padding-top: 0; }
.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 -1.2rem 1rem; border-bottom: 1px solid var(--line); }
.kpi { padding: 0.95rem 1.2rem 0.8rem; text-decoration: none; color: var(--ink); border-bottom: 3px solid transparent; display: flex; flex-direction: column; gap: 0.1rem; }
.kpi + .kpi { border-left: 1px solid var(--line); }
.kpi:hover { background: var(--paper); }
.kpi.on { border-bottom-color: var(--action); }
.kpi-label { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.kpi-val { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.chg { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chg.up { color: var(--up); } .chg.down { color: var(--down); } .chg.flat { color: var(--muted); }
.chart-box { position: relative; height: 260px; }

/* Görünürlük ve çubuklar */
.vis, .bars { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.vis li { display: grid; grid-template-columns: 4.2rem 1fr 2.2rem 2.4rem; align-items: center; gap: 0.6rem; }
.bars li { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr auto auto; align-items: center; gap: 0.6rem; }
.vl, .bl { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbar, .bbar { height: 8px; background: var(--paper); border-radius: 4px; overflow: hidden; }
.vbar i, .bbar i { display: block; height: 100%; background: var(--action); border-radius: 4px; }
.vbar i.out { background: var(--line); }
.vis b, .bars b { text-align: right; font-variant-numeric: tabular-nums; }
.vd { font-size: 0.8rem; font-weight: 700; text-align: right; }
.vd.up { color: var(--up); } .vd.down { color: var(--down); }

/* Uygulama tablosu */
.apps-table td { padding: 0.65rem 0.6rem; }
.app-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.app-name:hover { color: var(--action); }

/* Mini yapılacaklar ve yorumlar */
.todo-mini, .revs { list-style: none; margin: 0; padding: 0; }
.todo-mini li { display: flex; flex-direction: column; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.todo-mini li:first-child { padding-top: 0; }
.todo-mini a { font-weight: 600; color: var(--ink); text-decoration: none; }
.todo-mini a:hover { color: var(--action); }
.revs li { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.revs li:first-child { padding-top: 0; }
.revs li:last-child { border-bottom: none; }
.revs p { margin: 0; }
.rev-top { display: flex; justify-content: space-between; gap: 1rem; }
.stars { color: #d99a1b; letter-spacing: 1px; }
.stars .off { color: var(--line); }
.rev-title { font-weight: 700; margin-top: 0.2rem !important; }
.rev-body { color: var(--muted); font-size: 0.9rem; }

/* Başlık */
.markets { display: flex; gap: 0.4rem; margin-top: 0.7rem; flex-wrap: wrap; }
.market {
  text-decoration: none; color: var(--ink); border: 1px solid var(--line); padding: 0.25rem 0.7rem;
  border-radius: 999px; font-weight: 600; font-size: 0.88rem; background: var(--surface);
}
.market.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Öneriler */
.recs { list-style: none; margin: 0; padding: 0; }
.recs li { display: flex; gap: 1.5rem; justify-content: space-between; padding: 1rem 0; border-top: 1px solid var(--line); }
.rec-body { max-width: 72ch; }
.rec-body h3 { font-size: 1rem; margin: 0.15rem 0 0.35rem; }
.rec-body p { margin: 0; }
.rec-meta { font-size: 0.82rem; color: var(--muted); }
.why { color: var(--muted); font-size: 0.9rem; margin-top: 0.35rem !important; }
.rec-actions { display: flex; flex-direction: column; gap: 0.3rem; flex: none; }

/* Keyword tablosu */
.add { display: flex; gap: 0.4rem; min-width: min(360px, 100%); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 0.8rem; font-weight: 600; color: var(--muted); padding: 0 0.6rem 0.5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.rank { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; width: 4.5rem; }
td.rank.top { color: var(--up); }
.out { color: var(--muted); font-weight: 500; }
.term { font-weight: 600; }
.tag { font-size: 0.75rem; color: var(--muted); font-weight: 500; margin-left: 0.4rem; }
.delta { font-weight: 700; width: 4rem; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.spark polyline { fill: none; stroke: var(--action); stroke-width: 1.5; stroke-linejoin: round; }
.diff { display: inline-block; min-width: 2.2rem; padding: 0.05rem 0.4rem; border-radius: 4px;
  background: color-mix(in srgb, var(--down) calc(var(--d) * 0.35%), transparent); }
.top3 { color: var(--muted); font-size: 0.85rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.x { border: none; background: none; color: var(--muted); font-size: 1.1rem; padding: 0.1rem 0.4rem; }
button.x:hover { color: var(--down); }

/* Sonuçlar */
.sub { font-size: 0.95rem; margin: 1.5rem 0 0.5rem; }
.done { list-style: none; margin: 0; padding: 0; }
.done li { display: grid; grid-template-columns: 6.5rem 1fr 1fr; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.done .date { color: var(--muted); font-variant-numeric: tabular-nums; }
.done .t { font-weight: 600; }

/* Kurulum */
.setup { max-width: 620px; margin: 0 auto; padding: 3rem 1.25rem; }
.lead { color: var(--muted); margin: 0.6rem 0 1.5rem; }
fieldset { border: none; border-top: 1px solid var(--line); padding: 1.25rem 0 0.5rem; margin: 0; }
legend { font-weight: 700; padding-right: 0.6rem; }
.hint { color: var(--muted); font-size: 0.9rem; margin: 0.2rem 0 0.8rem; }
label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.85rem; }
label input { margin-top: 0.3rem; font-weight: 400; }
.ok { color: var(--up); font-weight: 600; margin-left: 0.3rem; }
.actions { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.5rem; }

@media (max-width: 1100px) {
  .g-main, .g-3 { grid-template-columns: 1fr 1fr; }
  .trend-card { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .nav-foot { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .nav-foot button { width: auto; }
  .g-main, .g-3, .g-2 { grid-template-columns: 1fr; }
  .kpis { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(odd) { border-left: none; }
  .kpi:not(:nth-last-child(-n+2)) { border-bottom-color: var(--line); }
  .kpi.on { border-bottom-color: var(--action); }
  .chart-box { height: 210px; }
  .recs li { flex-direction: column; gap: 0.7rem; }
  .rec-actions { flex-direction: row; }
  .done li { grid-template-columns: 1fr; gap: 0.1rem; }
  .top3 { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.apps-table td:first-child { min-width: 12rem; }
.warn-text { color: var(--down); font-weight: 600; }
code { font-size: 0.88em; background: var(--paper); padding: 0.05rem 0.3rem; border-radius: 4px; }

/* Abonelik kartı */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.2rem; margin: 0.9rem 0 0.4rem; }
.stats div { display: flex; flex-direction: column; }
.stats span { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.stats b { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Veri durumu */
.health { border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 0.5rem; }
.health h2 { margin-bottom: 0.6rem; }
.health dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0.4rem 0 1rem; font-size: 0.9rem; }
.health dt { color: var(--muted); font-weight: 600; }
.health dd { margin: 0; overflow-wrap: anywhere; }
.health h3 { font-size: 0.98rem; margin-top: 0.8rem; }

label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; margin-bottom: 0.45rem; }
label.check input { width: auto; margin: 0; }
.props li { display: grid; grid-template-columns: 7rem 1fr auto; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.props li:first-child { border-top: none; }
.props .st { font-weight: 600; white-space: nowrap; }
.props .diff { color: var(--muted); overflow-wrap: anywhere; }
.rec-change { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.ver-line { margin: 0.2rem 0 0.4rem; }

/* Release kokpiti */
.steps { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0.4rem 0 1rem; }
.steps li { font-size: 0.82rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.steps li.done { color: var(--up); border-color: var(--up); }
.steps li.now { color: var(--action-ink); background: var(--action); border-color: var(--action); }
.check { list-style: none; padding: 0; margin: 0; }
.check li { display: grid; grid-template-columns: 1.4rem 12rem 1fr; gap: 0.6rem; align-items: baseline; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.check li:first-child { border-top: none; }
.check .ic { font-weight: 800; text-align: center; }
.check .lbl { font-weight: 600; }
.check li.ok .ic { color: var(--up); }
.check li.fail .ic, .check li.fail .lbl { color: var(--down); }
.check li.warn .ic { color: #b7791f; }
.check li.todo .ic, .check li.na .ic { color: var(--muted); }
.actions-row { display: flex; gap: 0.6rem; margin-top: 0.9rem; }
.commits { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.88rem; }
.commits li { padding: 0.2rem 0; }
@media (max-width: 760px) { .check li { grid-template-columns: 1.4rem 1fr; } .check li .muted { grid-column: 2; } }

.rec-ev { font-size: 0.82rem; color: var(--muted); margin-top: 0.35rem; }
.conf { font-weight: 700; font-size: 0.74rem; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--line); margin-right: 0.35rem; }
.conf-yüksek { color: var(--up); border-color: var(--up); }
.conf-düşük { color: var(--down); border-color: var(--down); }

/* Bağlantılar */
.nav-badge { background: var(--down); color: var(--surface); border-radius: 999px; min-width: 1.3rem; padding: 0 0.4rem; font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 1.3rem; }
.conn-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.conn-head h1 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.conn-head p { margin: 0.25rem 0 0; }
.conn-progress { font-size: 0.9rem; color: var(--muted); min-width: 10rem; }
.conn-progress strong { color: var(--ink); font-size: 1.1rem; }
.conn-progress .bar { display: block; height: 6px; background: var(--line); border-radius: 3px; margin-top: 0.35rem; overflow: hidden; }
.conn-progress .bar span { display: block; height: 100%; background: var(--up); }
.conn-group h2 { font-size: 1rem; margin: 0 0 0.7rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.conn-group h2 small { font-weight: 400; font-size: 0.85rem; }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.conn-card { display: flex; flex-direction: column; gap: 0.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem 1rem; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.conn-card:hover, .conn-card:focus-visible { border-color: var(--action); box-shadow: 0 2px 10px rgb(0 0 0 / .06); }
.conn-card.st-need, .conn-card.st-warn { border-left: 3px solid var(--down); }
.conn-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.conn-sum { font-size: 0.85rem; margin-top: auto; padding-top: 0.35rem; }
.pill { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 999px; white-space: nowrap; border: 1px solid currentColor; }
.pill-ok { color: var(--up); }
.pill-warn, .pill-need { color: var(--down); }
.pill-off { color: var(--muted); }
.crumbs { font-size: 0.88rem; color: var(--muted); }
.crumbs a { color: var(--action); text-decoration: none; }
.conn-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.conn-side h3 { font-size: 0.92rem; margin: 0 0 0.5rem; }
.conn-side h3 + * { margin-top: 0; }
.conn-side * + h3 { margin-top: 1.1rem; }
.steps-list { padding-left: 1.2rem; margin: 0 0 0.6rem; font-size: 0.9rem; }
.steps-list li { margin-bottom: 0.45rem; }
.conn-form details { margin: 0.4rem 0 0.9rem; }
.conn-form summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.6rem; }
.conn-form .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.9rem; font-size: 0.88rem; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.health-app + .health-app { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.health-app h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.token-box code.token { display: block; overflow-wrap: anywhere; user-select: all; padding: 0.4rem; background: var(--paper); border-radius: 6px; }
.hero { border-color: var(--action); }
.hero h2 { font-size: 1.1rem; }
.conn-pager { display: flex; justify-content: space-between; font-size: 0.9rem; }
.conn-pager a { color: var(--action); text-decoration: none; }
@media (max-width: 760px) {
  .conn-cols { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  .kv dd { margin-bottom: 0.4rem; }
}

/* Görevler ve deneyler */
.tasks { list-style: none; margin: 0; padding: 0; }
.task { display: flex; gap: 1.5rem; justify-content: space-between; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.task:first-child { border-top: none; }
.task-body { max-width: 72ch; }
.task-body h3 { font-size: 1rem; margin: 0.15rem 0 0.35rem; }
.task-body p { margin: 0 0 0.25rem; }
.task.pr-0 .pri, .task.pr-1 .pri { color: var(--down); font-weight: 700; }
.task.st-blocked h3 { color: var(--down); }
.task-actions { display: flex; flex-direction: column; gap: 0.35rem; flex: none; width: 16rem; }
.task-new { margin-top: 0.8rem; }
.task-new form { display: grid; gap: 0.5rem; max-width: 36rem; margin-top: 0.6rem; }
.task-new summary, details > summary.small { cursor: pointer; }
b.down { color: var(--down); }
.exp + .exp { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.exp-head { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; margin-bottom: 0.4rem; }
.exp-head h3 { font-size: 1rem; margin: 0; }
.exp-table { margin: 0.5rem 0; }
.exp.st-stopped { opacity: 0.75; }
@media (max-width: 760px) {
  .task { flex-direction: column; gap: 0.6rem; }
  .task-actions { width: 100%; }
}
.reg { margin-top: 1rem; } .small-h { font-size: 0.95rem; margin: 0 0 0.6rem; }

/* Portföy */
.focus-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.fchip { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.fchip.f-GROW { color: var(--up); border-color: var(--up); }
.fchip.f-OPTIMIZE, .fchip.f-VALIDATE { color: var(--action); border-color: var(--action); }
.fchip.f-RECONSIDER, .fchip.f-ARCHIVE { color: var(--down); border-color: var(--down); }
.fchip.mine { border-width: 2px; }
.pf { list-style: none; margin: 0; padding: 0; }
.pf-item { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 0.7rem; }
.pf-main h2 { font-size: 1.05rem; margin: 0 0 0.2rem; }
.pf-main h2 a { color: var(--ink); text-decoration: none; }
.pf-main p { margin: 0.15rem 0; }
.pf-sug { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; margin-top: 0.4rem !important; }
.pf-nums { display: flex; gap: 1.4rem; margin: 0; }
.pf-nums div { display: flex; flex-direction: column; }
.pf-nums dt { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.pf-nums dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.pf-edit { grid-column: 1 / -1; }
.pf-edit form { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem; margin-top: 0.6rem; align-items: end; }
@media (max-width: 760px) { .pf-item { grid-template-columns: 1fr; } .pf-nums { gap: 1rem; } }

/* Ajanlar ve sprintler */
button.danger { background: var(--down); border-color: var(--down); color: #fff; }
.warn-box { border-left-color: var(--down); }
.rst { font-size: 0.78rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.rst-SUCCEEDED { color: var(--up); border-color: var(--up); }
.rst-FAILED, .rst-TIMED_OUT { color: var(--down); border-color: var(--down); }
.rst-RUNNING, .rst-WAITING_FOR_APPROVAL { color: var(--action); border-color: var(--action); }
.rst-QUEUED, .rst-CANCELLED { color: var(--muted); }
.sprint-box { border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 0.8rem; }
.sprint-box.st-active { border-color: var(--action); }
.sprint-box p { margin: 0.1rem 0; }
.run-form { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; max-width: 22rem; }
.run-form select { width: auto; padding: 0.25rem 0.4rem; font-size: 0.85rem; }
.run-form button { padding: 0.25rem 0.5rem; font-size: 0.85rem; white-space: nowrap; }
form.stack { display: grid; gap: 0.5rem; }
pre.out { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; max-height: 30rem; overflow: auto; }
.crumbs { font-size: 0.88rem; margin-bottom: 0.6rem; }
.crumbs a { color: var(--action); text-decoration: none; }
pre.doc { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.92rem; line-height: 1.55; margin: 0; }
form.inline { display: inline; } form.inline button.x { font-size: 0.8rem; }

/* Stüdyo: idle oyun ofisi (sınıflar game- önekli; panelin .task vb. sınıflarıyla çakışmasın) */
.brand span { font-weight: 500; color: var(--muted); }
.px { image-rendering: pixelated; display: block; overflow: visible; }
.game { --px: "Silkscreen", ui-monospace, monospace; --wood-a: #c8a27a; --wood-b: #bb956d; --wall: #34495e;
  --zone: rgba(255,255,255,.55); --ink-soft: #5b4636; display: flex; flex-direction: column; gap: 0.9rem; }
@media (prefers-color-scheme: dark) { .game { --wood-a: #3a2e25; --wood-b: #33281f; --wall: #10161d; --zone: rgba(0,0,0,.28); --ink-soft: #e0cdb8; } }
.game-hud { background: var(--wall); color: #f5f6fa; border-radius: 14px; padding: 0.9rem 1.1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.5rem; box-shadow: 0 4px 0 #0b1015; }
.game-title { font-family: var(--px); font-weight: 400; font-size: 1.35rem; margin: 0; }
.game-title span { color: #74b9ff; }
.game-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.game-stats li { display: flex; background: rgba(255,255,255,.1); border-radius: 999px; }
.game-chip { all: unset; cursor: pointer; display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border-radius: 999px; color: inherit; }
.game-chip:hover { background: rgba(255,255,255,.12); }
.game-chip:focus-visible { outline: 2px solid #74b9ff; }
.game-chip-energy { flex-direction: column; align-items: stretch; gap: 0.25rem; border-radius: 10px; width: 100%; }
.game-list { width: min(40rem, 94vw); max-height: 80vh; overflow: auto; }
.game-list ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.game-list li { padding: 0.55rem 0; border-top: 1px dashed var(--line); }
.game-list li:first-child { border-top: 0; }
.game-list li p { margin: 0 0 0.15rem; }
.game-note { font-size: 0.85rem; color: var(--muted); }
.game-note.bad { color: var(--down); }
.game-stats li.warn { background: rgba(214,48,49,.35); }
.game-stats b { font-family: var(--px); font-weight: 400; font-size: 1rem; }
.game-stats small { color: #dfe6e9; font-size: 0.75rem; }
.game-ico { font-size: 0.9rem; width: 1.1rem; text-align: center; }
.game-energy { min-width: 9rem; border-radius: 10px !important; }
.game-bar { display: block; height: 8px; background: rgba(255,255,255,.18); border-radius: 4px; overflow: hidden; }
.game-bar i { display: block; height: 100%; background: linear-gradient(90deg, #00b894, #fdcb6e); }
.game-alert { background: var(--surface); border: 2px solid #fdcb6e; border-radius: 12px; padding: 0.7rem 1rem; margin: 0; }
.game-alert.boss { border-color: #d63031; }
.game-alert h2 { font-size: 1rem; margin: 0 0 0.4rem; }
.game-alert ul { margin: 0; padding-left: 1.1rem; }
.game-room { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.9rem; padding: 1rem;
  border-radius: 16px; border: 4px solid #6d4c41;
  background: repeating-linear-gradient(90deg, var(--wood-a) 0 48px, var(--wood-b) 48px 50px); }
.game-zone { background: var(--zone); border-radius: 12px; padding: 0.6rem 0.7rem 0.8rem; }
.game-sign { display: inline-block; font-family: var(--px); font-weight: 400; font-size: 0.8rem; margin: 0 0 0.5rem;
  background: #6d4c41; color: #fff8e1; padding: 0.2rem 0.6rem; border-radius: 4px; box-shadow: 0 2px 0 #3e2723; }
.game-desks { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: space-around; }
.game-npc { position: relative; }
.game-npc-btn { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.4rem 0.3rem; border-radius: 12px; width: 124px; transition: transform .15s; }
.game-npc-btn:hover, .game-npc-btn:focus-visible { transform: translateY(-3px); background: rgba(255,255,255,.18); }
.game-npc-btn:focus-visible { outline: 2px solid var(--action); }
.game-bubble { position: relative; background: #fff; color: #2d3436; font-size: 0.72rem; font-weight: 600; line-height: 1.2;
  padding: 0.25rem 0.5rem; border-radius: 10px; box-shadow: 0 2px 0 rgba(0,0,0,.15); max-width: 120px; text-align: center; }
.game-doing { font-size: 0.72rem; color: var(--ink-soft); opacity: .85; text-align: center; line-height: 1.25; max-width: 120px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game-bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;
  border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; }
.st-working .game-bubble { background: #dff9fb; }
.st-waiting .game-bubble { background: #ff7675; color: #fff; animation: pop 1s steps(2) infinite; }
.st-waiting .game-bubble::after { border-top-color: #ff7675; }
.st-idle .game-bubble { opacity: .75; }
.game-tag { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.15; }
.game-card { border: 0; border-radius: 16px; padding: 1rem 1.1rem 0.9rem; width: min(30rem, 92vw);
  background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.game-card::backdrop { background: rgba(15, 20, 25, .45); }
.game-card header { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.4rem; }
.game-card h3 { margin: 0; font-size: 1.1rem; }
.game-card h4 { margin: 0.8rem 0 0.25rem; font-size: 0.85rem; color: var(--muted); }
.game-card p { margin: 0 0 0.3rem; overflow-wrap: anywhere; line-height: 1.45; }
.game-state { color: var(--muted); font-size: 0.85rem; }
.game-close { margin-left: auto; border-radius: 999px; padding: 0.2rem 0.55rem; }
.game-card-foot { border-top: 1px dashed var(--line); margin-top: 0.7rem !important; padding-top: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.game-pill { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; }
.game-pill.ok { background: rgba(0,184,148,.18); color: var(--up); }
.game-pill.bad { background: rgba(214,48,49,.15); color: var(--down); }
.game-bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 0.9rem; }
@media (max-width: 900px) { .game-bottom { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .game-hud { padding: 0.7rem; } .game-title { font-size: 1.1rem; }
  .game-stats li { padding: 0.25rem 0.55rem; } .game-room { padding: 0.6rem; gap: 0.6rem; grid-template-columns: 1fr; }
  .game-npc-btn { width: 104px; } .game-npc-btn svg { width: 72px; height: auto; }
}
.game-log, .game-servers { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0.9rem 1rem; }
.game-log h2, .game-servers h2 { font-family: var(--px); font-weight: 400; font-size: 0.9rem; margin: 0 0 0.6rem; }
.game-log ol { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow: auto; }
.game-log li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.6rem; padding: 0.35rem 0; border-top: 1px dashed var(--line); font-size: 0.88rem; }
.game-log li:first-child { border-top: 0; }
.game-log time { color: var(--muted); font-size: 0.75rem; padding-top: 0.1rem; }
.game-rack { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.3rem 0; }
.game-rack p { margin: 0 0 0.2rem; }
/* Canlandırma */
.px.st-working .arm { animation: type 0.35s steps(2) infinite; }
.px.st-working .glow { animation: glow 1.2s steps(2) infinite; }
.px .eye { animation: blink 4.5s steps(1) infinite; }
.px.st-idle .eye { opacity: 0.35; animation: none; }
.px .dots rect { animation: dot 1.2s steps(1) infinite; }
.px .dots rect:nth-child(2) { animation-delay: 0.4s; }
.px .dots rect:nth-child(3) { animation-delay: 0.8s; }
.px .bang { animation: bounce 0.8s steps(2) infinite; }
.px .zzz { animation: float 2.4s steps(4) infinite; }
.px .paper { animation: dot 2s steps(1) infinite; }
.st-idle .game-npc-btn svg { animation: breathe 3s ease-in-out infinite; }
@keyframes type { 50% { transform: translateY(-1px); } }
@keyframes glow { 0% { fill: #dfe6e9; } 50% { fill: #74b9ff; } }
@keyframes blink { 0%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes dot { 0% { opacity: 0.15; } 33% { opacity: 1; } }
@keyframes bounce { 50% { transform: translateY(-1px); } }
@keyframes pop { 50% { transform: scale(1.06); } }
@keyframes breathe { 50% { transform: translateY(1px); } }
@keyframes float { 0% { transform: translate(0, 1px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(1px, -2px); opacity: 0; } }
.srv .led { animation: led 1.6s steps(1) infinite; }
.srv-busy .led { animation-duration: 0.5s; }
.srv-off .led { animation: none; }
@keyframes led { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .px *, .srv *, .game-npc-btn, .game-bubble, .st-idle .game-npc-btn svg { animation: none !important; transition: none !important; } }

/* Giriş sayfası */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: repeating-linear-gradient(90deg, #c8a27a 0 48px, #bb956d 48px 50px); }
@media (prefers-color-scheme: dark) { .login { background: repeating-linear-gradient(90deg, #3a2e25 0 48px, #33281f 48px 50px); } }
.login-card { background: var(--surface); border-radius: 16px; padding: 1.6rem 1.5rem 1.2rem; width: min(24rem, 100%);
  display: flex; flex-direction: column; gap: 0.55rem; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.login-art { align-self: center; }
.login-card h1 { font-family: "Silkscreen", ui-monospace, monospace; font-weight: 400; font-size: 1.3rem; margin: 0.2rem 0 0; text-align: center; }
.login-card h1 span { color: var(--action); }
.login-card > p { margin: 0; text-align: center; }
.login-card label { font-weight: 600; font-size: 0.9rem; margin-top: 0.4rem; }
.login-card input[type=password] { font-size: 1rem; padding: 0.6rem 0.7rem; border-radius: 8px; }
.login-card button { padding: 0.6rem; font-size: 1rem; border-radius: 8px; margin-top: 0.3rem; }
.login-err { color: var(--down); font-weight: 600; }