/* FanSelect Studio — koyu tema, Can Klima Teknik marka paleti

   Logo renkleri (pikselden orneklendi): mavi #1675A8, kirmizi #EC2427, antrasit

   Yerlesim tokenlari: ui-ux-pro-max "Data-Dense Dashboard" | Fira Sans + Fira Code */



:root {

  /* yuzeyler — logo mavisine calan petrol/lacivert koyu (gri-mor degil) */

  --bg: #0c161e;

  --surface: #10202b;

  --surface-2: #162a38;

  --surface-3: #1e3646;



  /* cizgiler */

  --border: #203443;

  --border-strong: #2f4c61;

  --rule: #5e7a8e;



  /* metin */

  --text: #e3edf4;

  --muted: #94aaba;

  --faint: #647d90;



  /* marka — logodan */

  --primary: #1675a8;

  --primary-hi: #1b86c0;

  --brand-red: #ec2427;

  --brand-red-bright: #f0494c;



  /* anlamsal: accent=etkilesim (logo mavisinin koyu zemin tonu), ok=basari, bad=hata */

  --accent: #35a3dc;

  --accent-soft: rgba(53, 163, 220, .12);

  --accent-edge: rgba(53, 163, 220, .35);

  --ok: #34d399;

  --ok-soft: rgba(52, 211, 153, .10);

  --ok-edge: rgba(52, 211, 153, .35);

  --bad: #f87171;

  --bad-soft: rgba(248, 113, 113, .09);

  --bad-edge: rgba(248, 113, 113, .4);

  --warn: #fbbf24;

  --warn-soft: rgba(251, 191, 36, .08);

  --warn-edge: rgba(251, 191, 36, .35);



  /* veri serileri — chart.js dark temasiyla birebir */

  --pressure: #35a3dc;

  --power: #fbbf24;

  --eff: #a78bfa;

  --ghost: #f472b6;

  --system: #94a3b8;



  /* olcek: density 8/10 — dense dashboard */

  --sp-1: 4px;

  --sp-2: 8px;

  --sp-3: 12px;

  --sp-4: 16px;

  --sp-5: 24px;

  --sp-6: 32px;



  --header-h: 56px;

  --sidebar-w: 260px;

  --row-h: 36px;

  --card-pad: 12px;



  --r-sm: 3px;

  --r-md: 5px;

  --r-lg: 7px;



  --ring: #35a3dc;



  --font: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --mono: "Fira Code", "Cascadia Mono", ui-monospace, Consolas, monospace;



  --t-fast: 120ms;

  --t-base: 180ms;

  --ease: cubic-bezier(.2, .8, .3, 1);



  /* ikon maskeleri (emoji yerine SVG) */

  --ico-warn-u: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");

  --ico-bolt-u: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/></svg>");

  --ico-filter-u: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 3H2l8 9.5V19l4 2v-8.5L22 3z'/></svg>");

  --ico-close-u: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'><path d='M18 6 6 18M6 6l12 12'/></svg>");

  --ico-swap-u: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 16H3l3-3M3 16l3 3'/><path d='M17 8h4l-3-3m3 3-3 3'/><path d='M21 8H9M15 16H3'/></svg>");

  --ico-caret-u: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 7 4 17h16z' fill='%23000'/></svg>");

}



* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }



/* display:flex/grid tasiyan elemanlarda [hidden] ezilmesin (.form-error, .modal-opt, ...) */

[hidden] { display: none !important; }



body {

  background:

    radial-gradient(1100px 500px at 85% -10%, rgba(22, 117, 168, .16), transparent 60%),

    radial-gradient(800px 400px at -10% 110%, rgba(22, 117, 168, .08), transparent 60%),

    var(--bg);

  color: var(--text);

  font-family: var(--font);

  font-size: 14px;

  line-height: 1.5;

  display: flex;

  flex-direction: column;

  -webkit-font-smoothing: antialiased;

}



.skip-link {

  position: absolute; left: var(--sp-2); top: -60px; z-index: 100;

  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);

  background: var(--primary); color: #fff; font-weight: 600; text-decoration: none;

  transition: top var(--t-fast) var(--ease);

}

.skip-link:focus { top: var(--sp-2); }



:where(button, input, select, summary, a, [tabindex]):focus-visible {

  outline: 2px solid var(--ring);

  outline-offset: 2px;

  border-radius: var(--r-sm);

}



/* ikonlar: emoji degil, currentColor'a boyanan SVG maskeleri */

.ico {

  display: inline-block; flex: none;

  width: 1em; height: 1em;

  background: currentColor;

  -webkit-mask: var(--ico) center / contain no-repeat;

          mask: var(--ico) center / contain no-repeat;

}

.ico-warn   { --ico: var(--ico-warn-u); }

.ico-close  { --ico: var(--ico-close-u); }

.ico-swap   { --ico: var(--ico-swap-u); }



/* ---------- ust bar ---------- */

.topbar {

  display: flex; align-items: center; justify-content: space-between;

  min-height: var(--header-h);

  padding: 0 var(--sp-5);

  background: var(--surface);

  border-bottom: 1px solid var(--border-strong);

  position: sticky; top: 0; z-index: 20;

}

.brand { display: flex; align-items: center; gap: var(--sp-3); }

.brand-mark {

  width: 34px; height: 34px; border-radius: var(--r-md);

  display: grid; place-items: center;

  color: var(--surface); background: var(--primary);

}

.brand h1 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }

.brand h1 span { font-weight: 500; color: var(--brand-red-bright); }

.brand-sub {

  font-family: var(--mono);

  font-size: 10px; letter-spacing: .02em; color: var(--faint);

  margin-top: 2px;

}

.topbar-meta {

  display: flex; gap: var(--sp-4); align-items: center;

  font-family: var(--mono); font-size: 11px; color: var(--faint);

  font-variant-numeric: tabular-nums;

}

.lang-switch {

  display: flex; gap: 1px; padding: 2px;

  border: 1px solid var(--border-strong); border-radius: var(--r-md);

}

.lang-btn {

  border: none; background: transparent; color: var(--faint);

  font: 600 11px var(--mono); letter-spacing: .04em;

  padding: 3px 8px; border-radius: 2px; cursor: pointer;

  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);

}

.lang-btn:hover { background: var(--surface-2); color: var(--text); }

.lang-btn.on { background: var(--primary); color: #fff; }



/* ---------- yerlesim ---------- */

.layout {

  flex: 1; display: grid;

  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);

  gap: var(--sp-4);

  padding: var(--sp-4) var(--sp-5) var(--sp-6);

  align-items: start;

  max-width: 1680px; width: 100%; margin: 0 auto;

}

.content { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }



.panel {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--r-lg);

  padding: var(--sp-4);

}

.panel-title {

  font-family: var(--mono);

  font-size: 10px; font-weight: 600; text-transform: uppercase;

  letter-spacing: .14em; color: var(--faint);

  padding-bottom: var(--sp-2); margin-bottom: var(--sp-3);

  border-bottom: 1px solid var(--border);

}

/* form icindeki tek panel basligi (Enerji Analizi) Fan Sec butonunun hemen altinda gelir */

#dutyForm .panel-title { margin-top: var(--sp-5); }

.side { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }

.side .panel-title:not(:first-of-type) { margin-top: var(--sp-5); }



/* ---------- mod sekmeleri ---------- */

.mode-tabs {

  display: grid; grid-template-columns: 1fr 1fr;

  margin-bottom: var(--sp-4);

  border-bottom: 1px solid var(--border);

}

.mode-tab {

  padding: var(--sp-2) 0 10px; border: none; background: transparent;

  border-bottom: 2px solid transparent; margin-bottom: -1px;

  font: 600 12.5px var(--font); color: var(--faint); cursor: pointer;

  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);

}

.mode-tab:hover { color: var(--text); }

.mode-tab.on { color: var(--text); border-bottom-color: var(--accent); }



.catalog-hint { margin-top: var(--sp-2); font-size: 12px; color: var(--muted); }

#chart.catalog { cursor: crosshair; }



/* ---------- form ---------- */

.field { display: block; margin-bottom: 10px; }

.field > span {

  display: flex; justify-content: space-between; align-items: baseline;

  font-size: 11.5px; color: var(--muted); margin-bottom: var(--sp-1);

}

.field em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--faint); }

.field input, .series-select {

  width: 100%; padding: 7px 10px;

  background: var(--surface-2);

  border: 1px solid var(--border-strong); border-radius: var(--r-sm);

  color: var(--text);

  font: 500 14px var(--mono);

  font-variant-numeric: tabular-nums;

  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);

}

.series-select { font-family: var(--font); font-weight: 500; cursor: pointer; }

.field input:hover, .series-select:hover { border-color: var(--accent); }

.field input:focus, .series-select:focus {

  outline: none; border-color: var(--accent);

  box-shadow: 0 0 0 3px rgba(53, 163, 220, .22);

}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }



.rho-out {

  display: block; padding: 7px 10px;

  background: var(--surface-2);

  border: 1px solid var(--border); border-radius: var(--r-sm);

  color: var(--muted); font: 500 14px var(--mono);

  font-variant-numeric: tabular-nums;

}



.btn-primary {

  width: 100%; margin-top: var(--sp-4); padding: 10px;

  border: 1px solid var(--primary); border-radius: var(--r-sm); cursor: pointer;

  font: 600 13px var(--font); letter-spacing: .02em;

  color: #fff; background: var(--primary);

  transition: background var(--t-fast) var(--ease);

}

.btn-primary:hover { background: var(--primary-hi); }

.btn-primary:active { background: #12648f; }



/* Fan Sec'in altindaki ikincil ana eylem: dolgusuz ama accent cerceveli, primary ile yarismaz */

.btn-report {

  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);

  width: 100%; margin-top: var(--sp-2); padding: 10px;

  border: 1px solid var(--accent-edge); border-radius: var(--r-sm); cursor: pointer;

  font: 600 13px var(--font); letter-spacing: .02em;

  color: var(--accent); background: var(--accent-soft);

  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);

}

.btn-report::before { content: "⎙"; font-size: 15px; line-height: 1; }

.btn-report:hover:not(:disabled) { background: rgba(53, 163, 220, .2); border-color: var(--accent); }

.btn-report:disabled { opacity: .45; cursor: not-allowed; }



.form-error {

  display: flex; align-items: flex-start; gap: var(--sp-2);

  margin-top: var(--sp-2); padding: 9px 11px; border-radius: var(--r-sm);

  font: 500 12.5px var(--font); color: var(--bad);

  background: var(--bad-soft); border: 1px solid var(--bad-edge);

}

.form-error::before {

  content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px;

  background: currentColor;

  -webkit-mask: var(--ico-warn-u) center / contain no-repeat;

          mask: var(--ico-warn-u) center / contain no-repeat;

}



/* ---------- coklu calisma noktasi + LCC ---------- */

.mop { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-2); }

.mop summary {

  cursor: pointer; font: 600 10px var(--mono); color: var(--faint);

  text-transform: uppercase; letter-spacing: .12em; padding: var(--sp-1) 0;

}

.mop summary:hover { color: var(--text); }

.mop[open] summary { margin-bottom: var(--sp-2); }

.mop-row {

  display: grid; grid-template-columns: 1fr 1fr 1fr 26px; gap: var(--sp-1);

  margin-bottom: var(--sp-2); align-items: center;

}

.mop-row input {

  width: 100%; min-width: 0; padding: 5px 7px;

  background: var(--surface-2);

  border: 1px solid var(--border-strong); border-radius: var(--r-sm);

  color: var(--text); font: 500 12px var(--mono);

  font-variant-numeric: tabular-nums;

}

.mop-row input:focus {

  outline: none; border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(51, 65, 85, .12);

}

.mop-del {

  display: grid; place-items: center;

  height: 26px; border-radius: var(--r-sm); cursor: pointer;

  background: transparent; border: 1px solid var(--border-strong);

  color: var(--faint);

  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),

              background var(--t-fast) var(--ease);

}

.mop-del .ico { width: 11px; height: 11px; }

.mop-del:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }

.mop-add { width: 100%; margin: var(--sp-1) 0 var(--sp-3); }

.mop-auto {

  display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer;

  font: 500 12px var(--font); color: var(--text); margin-bottom: var(--sp-2);

  line-height: 1.45;

}

.mop-auto input { accent-color: var(--ok); width: 15px; height: 15px; flex: none; margin-top: 1px; }

.mop-main-row {

  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);

  margin-bottom: var(--sp-2); padding: 6px 10px;

  background: var(--ok-soft); border: 1px solid var(--ok-edge);

  border-left: 2px solid var(--ok); border-radius: var(--r-sm);

}

.mop-main-label { font: 600 11.5px var(--font); color: var(--text); }

.mop-main-hours { display: flex; align-items: center; gap: var(--sp-1); }

.mop-main-hours input {

  width: 74px; padding: 5px 7px; background: var(--surface-2);

  border: 1px solid var(--border-strong); border-radius: var(--r-sm); color: var(--text);

  font: 500 12px var(--mono); font-variant-numeric: tabular-nums; text-align: right;

}

.mop-main-hours em { font-family: var(--mono); font-size: 10px; color: var(--faint); font-style: normal; }

.mop-table .mop-bad td { color: var(--bad); }

.mop-table td:last-child { color: var(--text); }



.btn-ghost {

  padding: 7px 14px; border-radius: var(--r-sm); cursor: pointer;

  font: 600 12.5px var(--font); color: var(--accent);

  background: transparent; border: 1px solid var(--border-strong);

  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);

}

.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent); }



/* ---------- gosterge ---------- */

.legend { margin-top: var(--sp-5); }

.lg {

  display: flex; align-items: center; gap: var(--sp-2);

  font-size: 11.5px; color: var(--muted); margin-bottom: 6px;

}

.sw { width: 18px; height: 2px; border-radius: 1px; flex: none; }

.sw-pressure { background: var(--pressure); height: 2.5px; }

.sw-power { background: var(--power); }

.sw-eff { background: repeating-linear-gradient(90deg, var(--eff) 0 2px, transparent 2px 5px); }

.sw-system { background: repeating-linear-gradient(90deg, var(--system) 0 4px, transparent 4px 8px); }

.sw-duty { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

.sw-env { height: 9px; background: rgba(53, 163, 220, .1); border: 1px solid rgba(53, 163, 220, .35); }



/* ---------- sonuc tablosu ---------- */

.results-head {

  display: flex; align-items: center; justify-content: space-between;

  padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);

  border-bottom: 1px solid var(--border);

}

.results-head .panel-title { border: none; padding: 0; margin: 0; }

.count-badge {

  font: 600 10.5px var(--mono); color: var(--ok);

  font-variant-numeric: tabular-nums;

  padding: 2px 8px; border-radius: 999px;

  background: var(--ok-soft); border: 1px solid var(--ok-edge);

}

.count-badge:empty { display: none; }



.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

th {

  text-align: left; font-family: var(--mono);

  font-size: 9.5px; font-weight: 600;

  text-transform: uppercase; letter-spacing: .1em; color: var(--faint);

  padding: var(--sp-2) 10px; border-bottom: 1px solid var(--rule);

  white-space: nowrap; background: var(--surface);

}

th em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }

th.num, td.num { text-align: right; }

th.sortable { cursor: pointer; user-select: none; }

th.sortable:hover { color: var(--text); }

th.sorted-asc::after, th.sorted-desc::after {

  content: ""; display: inline-block; vertical-align: middle;

  width: 9px; height: 9px; margin-left: 5px;

  background: var(--accent);

  -webkit-mask: var(--ico-caret-u) center / contain no-repeat;

          mask: var(--ico-caret-u) center / contain no-repeat;

}

th.sorted-desc::after { transform: rotate(180deg); }



td {

  height: var(--row-h);

  padding: 0 10px; font-size: 13px;

  border-bottom: 1px solid var(--border);

  white-space: nowrap;

}

tbody tr { cursor: pointer; transition: background var(--t-fast) var(--ease); }

tbody tr:hover { background: var(--surface-2); }

tbody tr.sel { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }

td.model { font-weight: 600; font-family: var(--mono); font-size: 12.5px; }

td.model small {

  display: block; font-family: var(--font); font-weight: 400;

  font-size: 10.5px; color: var(--faint);

}

td.num { font-family: var(--mono); }



.effbar {

  display: inline-block; vertical-align: middle; margin-left: var(--sp-2);

  width: 48px; height: 3px; border-radius: 1px; background: var(--surface-3);

  overflow: hidden;

}

.effbar i { display: block; height: 100%; background: var(--ok); }

.empty-msg { padding: var(--sp-6) 10px; color: var(--muted); font-size: 13.5px; text-align: center; }

.empty-msg strong { color: var(--text); }

.flow-flag {

  display: inline-flex; vertical-align: -2px; margin-left: 5px;

  color: var(--warn); cursor: help;

}

.flow-flag .ico { width: 13px; height: 13px; }

th.chk, td.chk { text-align: center; width: 34px; }

th.chk .ico { width: 13px; height: 13px; vertical-align: middle; }

td.chk input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--primary); }



/* ---------- karsilastirma ---------- */

/* Karsilastirma grafigi: yaninda kart yok — tam genislik, yatay format.

   Cift sinif secici: dosyada sonra gelen .chart-box'in kare oranini ezmek icin */

.chart-box.compare-box {

  aspect-ratio: auto; max-height: none;

  min-height: 500px; margin-bottom: var(--sp-3);

  border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-1);

}

.compare-box canvas { width: 100%; height: 500px; display: block; }

.compare-table td { font-family: var(--mono); font-size: 12.5px; }

.compare-table td:first-child { color: var(--muted); white-space: nowrap; font-family: var(--font); }

.compare-table th {

  font-family: var(--font); font-size: 12px;

  text-transform: none; letter-spacing: 0; color: var(--text);

}

.cmp-sw {

  display: inline-block; width: 9px; height: 9px;

  border-radius: 2px; margin-right: 6px; vertical-align: middle;

}



/* ---------- detay ---------- */

.detail-head {

  display: flex; align-items: flex-start; justify-content: space-between;

  gap: var(--sp-3); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);

  border-bottom: 1px solid var(--rule);

}

.detail-head h2 {

  font-family: var(--mono);

  font-size: 20px; font-weight: 600; letter-spacing: -.01em;

}

.badges { display: flex; gap: 5px; margin-top: var(--sp-2); flex-wrap: wrap; }

.badge {

  font: 500 10.5px var(--mono); padding: 2px 7px; border-radius: var(--r-sm);

  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border);

  font-variant-numeric: tabular-nums;

}

.badge.ok { color: var(--ok); border-color: var(--ok-edge); background: var(--ok-soft); }

.badge.warn { color: var(--warn); border-color: var(--warn-edge); background: var(--warn-soft); }



.angle-hint {

  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);

  padding: 11px 13px;

  font-size: 13px; line-height: 1.5; color: #fde68a;

  background: var(--warn-soft);

  border: 1px solid var(--warn-edge); border-left: 2px solid var(--warn);

  border-radius: var(--r-sm);

}

.angle-hint[hidden] { display: none; }

.angle-hint > span { display: flex; align-items: flex-start; gap: var(--sp-2); }

.angle-hint .ico { margin-top: 3px; color: var(--warn); }

.angle-hint b { color: var(--text); }

.btn-ghost.btn-sm {

  padding: 8px 14px; font-size: 12.5px; white-space: nowrap; flex: none;

  color: #1a1a1a; background: var(--warn); border-color: var(--warn);

}

.btn-ghost.btn-sm:hover { background: #f2b418; border-color: #f2b418; }



.chart-col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-4); }

.chart-box {

  background: var(--surface-2); border: 1px solid var(--border);

  border-radius: var(--r-md); padding: var(--sp-1);

  aspect-ratio: 1.1 / 1; max-height: 760px;

  display: flex;

}

.chart-box canvas { width: 100%; height: 100%; display: block; }



.stat-col { display: flex; flex-direction: column; gap: var(--sp-2); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

.stat {

  background: var(--surface); border: 1px solid var(--border);

  border-radius: var(--r-md); padding: 9px var(--card-pad);

}

.stat b {

  display: block; font-family: var(--mono);

  font-size: 16px; font-weight: 600;

  font-variant-numeric: tabular-nums; letter-spacing: -.02em;

}

.stat b small { font-size: 10.5px; font-weight: 400; color: var(--faint); margin-left: 2px; }

.stat span {

  display: block; margin-top: 2px;

  font-size: 9.5px; color: var(--faint);

  text-transform: uppercase; letter-spacing: .08em;

}

.stat.hero {

  grid-column: span 2;

  border-color: var(--ok-edge); background: var(--ok-soft);

  border-left: 2px solid var(--ok);

}

.stat.hero b { color: var(--ok); font-size: 22px; }



.motor-card {

  background: var(--surface); border: 1px solid var(--border);

  border-radius: var(--r-md); padding: var(--card-pad) 13px;

}

.motor-card h3 {

  font-family: var(--mono);

  font-size: 9.5px; font-weight: 600; text-transform: uppercase;

  letter-spacing: .12em; color: var(--faint);

  padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);

  border-bottom: 1px solid var(--border);

}

.motor-card .mc-main { font: 600 15px var(--mono); margin-bottom: 2px; }

.motor-card .mc-main small { font-weight: 400; color: var(--muted); font-size: 11px; }

/* Etiket-deger ciftleri: 300px kartta tek sutun — EN'deki uzun etiketler

   ("Peak shaft power") kesilmeden sigar, degerler tek sag hizada durur */

.motor-rows { display: grid; grid-template-columns: 1fr; margin-top: var(--sp-2); }

.motor-rows div {

  display: flex; justify-content: space-between; align-items: baseline;

  gap: var(--sp-3); min-width: 0;

  font-size: 11.5px; padding: 4px 0;

  border-bottom: 1px dashed var(--border);

}

.motor-rows div:last-child { border-bottom: none; }

.motor-rows dt { color: var(--faint); white-space: nowrap; }

.motor-rows dd { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.motor-none { color: var(--bad); font-size: 12.5px; }



/* ---------- enerji / simulasyon kartlari ---------- */

.energy-section {

  margin-top: var(--sp-4);

  background: var(--surface);

  border: 1px solid var(--border);

  border-top: 2px solid var(--ok);

  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);

}

.energy-section h3 {

  font-size: 13px; font-weight: 600;

  color: var(--text); margin-bottom: var(--sp-4);

  display: flex; align-items: center; gap: 7px;

}

.energy-section h3::before {

  content: ""; flex: none; width: 15px; height: 15px;

  background: var(--ok);

  -webkit-mask: var(--ico-bolt-u) center / contain no-repeat;

          mask: var(--ico-bolt-u) center / contain no-repeat;

}

.energy-section .table-wrap { margin-bottom: var(--sp-4); }

.energy-section .oct-table.mop-table { font-size: 12px; }

.energy-section .oct-table.mop-table th,

.energy-section .oct-table.mop-table td { padding: 5px 10px; height: auto; }

.energy-section .motor-rows {

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-1);

}

.energy-section .motor-rows div {

  flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-1) 0;

  border-bottom: none;

}

.energy-section .motor-rows dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; }

.energy-section .motor-rows dd { font-size: 16px; font-weight: 600; color: var(--ok); }

.energy-section .card-note {

  margin-top: var(--sp-3); font-size: 12px; line-height: 1.55; color: var(--muted);

}

.energy-section .card-note.bad {

  display: flex; align-items: flex-start; gap: var(--sp-2);

  margin-top: var(--sp-3); padding: 10px var(--card-pad); border-radius: var(--r-sm);

  font-weight: 500; font-size: 12.5px; color: var(--bad);

  background: var(--bad-soft); border: 1px solid var(--bad-edge);

}

.energy-section .card-note.bad::before {

  content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px;

  background: currentColor;

  -webkit-mask: var(--ico-warn-u) center / contain no-repeat;

          mask: var(--ico-warn-u) center / contain no-repeat;

}

.energy-section .motor-none { font-size: 13px; }



/* senaryo karsilastirma kartlari: baslik + birim + degisim rozeti, altinda iki yatay bar */

.cmp-grid {

  display: grid; gap: var(--sp-3);

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  margin-top: var(--sp-2);

}

.cmp {

  margin: 0; padding: var(--sp-3);

  background: var(--surface-2);

  border: 1px solid var(--border);

  border-radius: var(--r-sm);

  min-width: 0;

}

.cmp-head {

  display: flex; align-items: baseline; gap: var(--sp-2);

  margin-bottom: var(--sp-3);

}

.cmp-title {

  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;

  color: var(--text);

}

.cmp-unit { font-size: 9.5px; color: var(--faint); font-family: var(--mono); }

.cmp-badge {

  margin-left: auto; flex: none;

  padding: 2px 7px; border-radius: 999px;

  font-size: 9.5px; font-weight: 600; letter-spacing: .02em;

}

.cmp-badge.good { color: var(--ok); background: var(--ok-soft); }

.cmp-badge.bad { color: var(--bad); background: var(--bad-soft); }



.cmp-row {

  display: grid; grid-template-columns: 84px 1fr auto;

  align-items: center; gap: var(--sp-2);

  padding: 3px 0;

}

.cmp-lbl { font-size: 10px; color: var(--faint); white-space: nowrap; }

.cmp-track {

  height: 9px; border-radius: 999px;

  background: var(--surface-3); overflow: hidden;

}

.cmp-track i {

  display: block; height: 100%; border-radius: 999px;

  transition: width var(--t-fast) var(--ease);

}

.cmp-track i.ref { background: var(--muted); }

.cmp-track i.good { background: var(--ok); }

.cmp-track i.bad { background: var(--bad); }

.cmp-num {

  font-family: var(--mono); font-variant-numeric: tabular-nums;

  font-size: 12.5px; font-weight: 600; color: var(--text);

  min-width: 72px; text-align: right;

}



/* ---------- filtre kirlenmesi simulasyonu ---------- */

.energy-section.filter-section { border-top-color: var(--warn); }

.energy-section.filter-section h3::before {

  background: var(--warn);

  -webkit-mask-image: var(--ico-filter-u);

          mask-image: var(--ico-filter-u);

}

.filter-table td.model { text-align: left; white-space: normal; font-family: var(--font); font-weight: 500; }

.filter-table th:nth-child(2) { text-align: left; }

.filter-table .fe-input {

  width: 62px; padding: 3px 6px; background: var(--surface-2);

  border: 1px solid var(--border-strong); border-radius: var(--r-sm);

  color: var(--text); font: 500 12px var(--mono); text-align: right;

  font-variant-numeric: tabular-nums;

}

.filter-table .fe-pct { width: 48px; }

.filter-table .fe-input:focus {

  outline: none; border-color: var(--warn);

  box-shadow: 0 0 0 3px rgba(251, 191, 36, .18);

}

.filter-table td.chk input { accent-color: var(--warn); }



.fs-mode { margin: var(--sp-4) 0; }

.fs-mode-label {

  display: block; margin-bottom: var(--sp-2);

  font: 600 9.5px var(--mono); text-transform: uppercase;

  letter-spacing: .12em; color: var(--faint);

}

.fs-seg {

  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;

  max-width: 100%;

  border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden;

}

.fs-seg-btn {

  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;

  padding: 8px 15px; min-width: 0; cursor: pointer; text-align: left;

  background: var(--surface); border: none; color: var(--muted);

  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);

}

.fs-seg-btn + .fs-seg-btn { border-left: 1px solid var(--border-strong); }

.fs-seg-btn b { font: 600 12.5px var(--font); }

.fs-seg-btn small { font: 400 10px var(--mono); color: var(--faint); white-space: nowrap; }

.fs-seg-btn:hover:not(.on) { background: var(--surface-2); color: var(--text); }

.fs-seg-btn.on { color: #1a1a1a; background: var(--warn); }

.fs-seg-btn.on small { color: rgba(26, 26, 26, .72); }



.fs-grid { margin-bottom: var(--sp-1); }



.oct-table { width: 100%; border-collapse: collapse; font-size: 11px; }

.oct-table th, .oct-table td {

  height: auto; padding: 3px 5px; text-align: right;

  border-bottom: 1px solid var(--border); white-space: nowrap;

  font-family: var(--mono);

}

.oct-table th { color: var(--faint); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 10px; }

.oct-table td:first-child, .oct-table th:first-child {

  text-align: left; color: var(--muted); font-family: var(--font);

}

.oct-table td:last-child { color: var(--text); font-weight: 600; }



/* ---------- yazdirma bolum secimi ---------- */

.modal-backdrop {

  position: fixed; inset: 0; z-index: 50;

  display: flex; align-items: center; justify-content: center;

  background: rgba(15, 23, 42, .5);

}

.modal-backdrop[hidden] { display: none; }

.modal {

  width: 320px; padding: var(--sp-5);

  background: var(--surface); border: 1px solid var(--border-strong);

  border-radius: var(--r-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, .55);

}

.modal h3 {

  font-family: var(--mono);

  font-size: 10px; font-weight: 600; text-transform: uppercase;

  letter-spacing: .12em; color: var(--faint);

  padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);

  border-bottom: 1px solid var(--border);

}

.modal-opt {

  display: flex; align-items: center; gap: var(--sp-2);

  padding: 7px 2px; font-size: 13px; cursor: pointer;

  border-bottom: 1px solid var(--border);

}

.modal-opt:hover { color: var(--accent); }

.modal-opt input { width: 14px; height: 14px; accent-color: var(--primary); cursor: pointer; }

.modal-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-4); }

.btn-primary.btn-inline { width: auto; margin-top: 0; padding: 8px 16px; }



/* ---------- hareket tercihi ---------- */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: .01ms !important;

    transition-duration: .01ms !important;

  }

}



/* ---------- yazdirma ---------- */

.print-only { display: none; }

.opt-hint { margin-left: auto; font-size: 10px; font-style: normal; color: var(--faint); }



@media print {

  @page {

    size: A4 portrait; margin: 12mm 13mm;

    @bottom-center { content: counter(page); font-size: 9px; color: #94a3b8; }

  }

  body { background: #fff; color: #0f172a; display: block; }

  .no-print { display: none !important; }

  .print-only { display: block; }

  #report { padding: 0; font-size: 11px; }

  .rp-head {

    display: flex; justify-content: space-between; align-items: flex-end;

    border-bottom: 2px solid #334155; padding-bottom: 6px; margin-bottom: 8px;

  }

  .rp-head h1 { font-family: var(--mono); font-size: 18px; color: #334155; letter-spacing: .03em; }

  .rp-sub, #rpDate { color: #64748b; font-size: 10px; }

  .rp-model { font-family: var(--mono); font-size: 14px; margin-bottom: 6px; color: #0f172a; }

  .rp-chart { border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px; margin-bottom: 8px; }

  .rp-chart canvas { width: 100%; height: auto; }

  .rp-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  .rp-tables table { width: 100%; border-collapse: collapse; break-inside: avoid; }

  .rp-tables caption {

    text-align: left; font-weight: 700; font-size: 10px; color: #fff;

    background: #334155; padding: 4px 8px; letter-spacing: .05em;

  }

  .rp-tables table.motor caption { background: #047857; }

  .rp-tables table.energy caption { background: #b45309; }

  .rp-tables table.acoustic { grid-column: 1 / -1; }

  .rp-tables table.acoustic caption { background: #6d28d9; }

  .rp-tables table.acoustic td { text-align: right; width: auto; }

  .rp-tables table.acoustic td:first-child { text-align: left; }

  .rp-tables td {

    height: auto; border: 1px solid #e2e8f0; padding: 3px 7px; font-size: 10px;

    white-space: normal;

  }

  .rp-tables td:first-child { color: #475569; width: 46%; }

  .rp-tables td:last-child {

    font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;

  }



  /* --- 1. sayfa alti: ses --- */

  #rpSound[hidden] { display: none; }

  .rp-sound {

    margin-top: 8px; break-inside: avoid;

    -webkit-print-color-adjust: exact; print-color-adjust: exact;

  }

  .rp-sound .rp-a-in { padding: 6px 8px; }

  .rp-sound table.acoustic { margin-top: 0; }



  /* --- 2. sayfa: analiz --- */

  /* Bar/sutun grafikleri arka plan rengiyle cizildigi icin renk optimizasyonu kapatilir */

  #rpAnalysis { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  #rpAnalysis[hidden], #rpCompare[hidden] { display: none; }

  #rpCompare { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .rp-cmp-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }

  .rp-cmp-item { display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: #334155; }

  .rp-cmp-item i { width: 9px; height: 9px; border-radius: 2px; }

  .rp-analysis { break-before: page; page-break-before: always; padding-top: 2mm; }

  .rp-a-head {

    display: flex; align-items: baseline; justify-content: space-between;

    background: #0f172a; color: #fff; padding: 7px 10px; border-radius: 3px;

  }

  .rp-a-head h2 {

    font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .18em;

  }

  #rpAnalysisModel { font-family: var(--mono); font-size: 10px; color: #94a3b8; }

  .rp-a-body { margin-top: 9px; display: flex; flex-direction: column; gap: 9px; }



  .rp-a-card {

    break-inside: avoid;

    border: 1px solid #e2e8f0; border-left: 3px solid #334155; border-radius: 3px;

  }

  .rp-a-card h3 {

    font-size: 9.5px; font-weight: 700; letter-spacing: .07em; color: #334155;

    background: #f1f5f9; padding: 4px 8px; border-bottom: 1px solid #e2e8f0;

  }

  .rp-a-in { padding: 8px; }

  .rp-a-card.energy { border-left-color: #b45309; }

  .rp-a-card.energy h3 { color: #b45309; background: #fff7ed; }

  .rp-a-card.scenario { border-left-color: #0369a1; }

  .rp-a-card.scenario h3 { color: #0369a1; background: #f0f9ff; }

  .rp-a-card.filter { border-left-color: #be123c; }

  .rp-a-card.filter h3 { color: #be123c; background: #fff1f2; }

  .rp-a-card.acoustic { border-left-color: #6d28d9; }

  .rp-a-card.acoustic h3 { color: #6d28d9; background: #f5f3ff; }



  .rp-a-stats { display: flex; gap: 6px; margin-bottom: 8px; }

  .rp-a-stat {

    flex: 1; padding: 5px 8px; border: 1px solid #e2e8f0; border-radius: 3px; background: #f8fafc;

  }

  .rp-a-stat b {

    display: block; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;

  }

  .rp-a-stat span { font-size: 8.5px; color: #64748b; letter-spacing: .03em; }

  .rp-a-note { font-size: 9px; color: #64748b; margin-top: 6px; }



  .rp-a-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }

  .rp-a-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

  .rp-a-card.scenario .rp-a-cards { grid-template-columns: repeat(2, 1fr); }

  .rp-a-in table { width: 100%; border-collapse: collapse; }

  .rp-a-in td { border: 1px solid #e2e8f0; padding: 3px 7px; font-size: 9.5px; }

  .rp-a-in td:first-child { color: #475569; }

  .rp-a-in td:last-child {

    font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;

  }

  .rp-a-in table.acoustic { margin-top: 8px; }

  .rp-a-in table.acoustic td { text-align: right; }

  .rp-a-in table.acoustic td:first-child { text-align: left; font-family: inherit; font-weight: 400; }



  /* yatay karsilastirma bari */

  .rpb {

    margin: 0; padding: 6px 7px; border: 1px solid #e2e8f0; border-radius: 3px; background: #f8fafc;

    break-inside: avoid;

  }

  .rpb-head { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; }

  .rpb-title { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

  .rpb-unit { font-family: var(--mono); font-size: 8px; color: #94a3b8; }

  .rpb-badge {

    margin-left: auto; font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 999px;

  }

  .rpb-badge.good { color: #047857; background: #d1fae5; }

  .rpb-badge.bad { color: #b91c1c; background: #fee2e2; }

  .rpb-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 5px; padding: 1.5px 0; }

  .rpb-lbl { font-size: 8.5px; color: #64748b; }

  .rpb-track { height: 7px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }

  .rpb-track i { display: block; height: 100%; border-radius: 999px; }

  .rpb-track i.ref { background: #94a3b8; }

  .rpb-track i.good { background: #10b981; }

  .rpb-track i.bad { background: #ef4444; }

  .rpb-num {

    font-family: var(--mono); font-size: 9.5px; font-weight: 600; font-variant-numeric: tabular-nums;

    min-width: 46px; text-align: right;

  }



  /* dikey sutun grafik */

  .rpc { margin: 0; break-inside: avoid; }

  .rpc-title {

    font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: #475569;

    text-transform: uppercase; margin-bottom: 4px;

    display: flex; align-items: center; gap: 6px;

  }

  .rpc-plot {

    display: flex; align-items: flex-end; gap: 4px; height: 96px;

    border-bottom: 1px solid #cbd5e1; padding: 0 2px;

  }

  .rpc-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }

  .rpc-val { font-family: var(--mono); font-size: 8px; color: #334155; margin-bottom: 2px; }

  .rpc-stack { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }

  .rpc-bar { width: 62%; max-width: 34px; border-radius: 2px 2px 0 0; background: #35a3dc; }

  .rpc-bar.kwh { background: #b45309; }

  .rpc-lbl { font-size: 8px; color: #64748b; margin-top: 2px; }

}



/* ---------- dar ekran ---------- */

@media (max-width: 1100px) {

  .layout { grid-template-columns: 1fr; padding: var(--sp-3) var(--sp-4) var(--sp-5); }

  .side { position: static; }

  .detail-grid { grid-template-columns: 1fr; }

  .chart-box { max-height: 560px; }

}



@media (max-width: 620px) {

  .topbar { padding: var(--sp-2) var(--sp-3); flex-wrap: wrap; gap: var(--sp-2); }

  .topbar-meta { gap: var(--sp-3); font-size: 10px; }

  .detail-head { flex-direction: column; }

  .energy-section { padding: var(--sp-3); }

  .fs-seg { display: grid; grid-auto-flow: row; }

  .fs-seg-btn + .fs-seg-btn { border-left: none; border-top: 1px solid var(--border-strong); }

}