/* Pulse Body Lab — açık klinik tema (VALD Hub düzeni). Inline stil yok (CSP style-src 'self'). */
:root {
  --bg: #F4F5F7; --card: #FFFFFF; --line: #E3E5E8; --line-2: #CFD4D9; --ink: #2B2F33; --ink-2: #1D2429; --muted: #6B737B;
  --acc: #0E8FA8; --acc-dark: #0B7389; --acc-soft: #E3F3F6;
  --left: #1976D2; --right: #EF6C00;
  --good: #1E8E3E; --warn: #F2A200; --warn-text: #9A6700; --bad: #D93025;
  --good-bg: #E7F6EA; --warn-bg: #FFF4DC; --bad-bg: #FDECEC;
  --font: Roboto, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); }
h1, h2, h3 { color: var(--ink-2); margin: 0 0 .5em; font-weight: 500; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.1rem; } h3 { font-size: .95rem; }
a { color: var(--acc); }

/* Kabuk */
.shell { display: flex; min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; width: 64px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; background: var(--card); border-right: 1px solid var(--line); }
.rail-items { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rail-item { width: 56px; display: grid; justify-items: center; gap: 2px; padding: 8px 0; border: 0; border-radius: 4px; background: none; color: var(--muted); font: 500 .68rem var(--font); text-decoration: none; cursor: pointer; }
.rail-item:hover { background: var(--bg); color: var(--ink); }
.rail-item.active { color: var(--acc); background: var(--acc-soft); }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.main { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { height: 24px; }
.product { font-weight: 600; color: var(--acc); letter-spacing: .03em; }
.user { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.app { max-width: 1400px; margin: 0 auto; padding: 20px 24px; }

/* Temel öğeler */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.msg { color: var(--warn-text); min-height: 1.5em; margin: .5em 0 0; }
.msg.error { color: var(--bad); }
label, .field > span { display: block; font-size: .8rem; color: var(--muted); margin: 10px 0 4px; }
input, select, textarea { width: 100%; padding: 8px 10px; border-radius: 4px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; }
input:disabled { background: var(--bg); color: var(--muted); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 4px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: 500 .9rem var(--font); cursor: pointer; text-decoration: none; }
.btn:hover:not(:disabled) { border-color: var(--acc); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--acc-dark); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: var(--bad); color: var(--bad); background: #fff; }
.btn.small { padding: 5px 10px; font-size: .82rem; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.login { max-width: 380px; margin: 10vh auto; }
.login .btn { width: 100%; justify-content: center; margin-top: 16px; }

/* Kişiler */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.toolbar input { flex: 1; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.item { display: flex; align-items: center; gap: 8px; }
.pick:hover, .pick.chosen { border-color: var(--acc); }
.empty { padding: 12px 4px; }
.form { margin-bottom: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { padding: 12px 14px; display: grid; gap: 2px; }
.stat .big { font-size: 1.8rem; }
.pick { flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.meta-line { white-space: nowrap; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } .pick { flex-direction: column; gap: 0; } }

/* Sayfa başlığı ve sekmeler */
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.page-head h1 { margin: 0; font-size: 1.7rem; font-weight: 400; }
.spacer { flex: 1; }
.meta { color: var(--muted); margin: 0 0 12px; }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.subtabs button { padding: 10px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font: 500 .9rem var(--font); cursor: pointer; white-space: nowrap; }
.subtabs button[aria-selected="true"] { color: var(--ink-2); border-bottom-color: var(--acc); }

/* Genel bakış kartları */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mcard.index { grid-row: span 2; }
.mcard { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
.mcard h3 { margin: 0; font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.sub { color: var(--muted); font-size: .75rem; }
.big { font-size: 2rem; font-weight: 300; line-height: 1.1; color: var(--ink-2); }
.of { font-size: .9rem; color: var(--muted); margin-left: 2px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.desc { color: var(--muted); }
.desc.L, .L { color: var(--left); } .desc.R, .R { color: var(--right); }
.pair-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair-vals .big { font-size: 1.6rem; }
.side { display: grid; gap: 2px; align-content: start; }
.asym { font-size: .8rem; color: var(--muted); }
.mcard.index { border-top: 3px solid var(--acc); }
.index-body { display: flex; align-items: center; gap: 14px; }
.ring circle.bg { fill: none; stroke: var(--line); stroke-width: 4; }
.ring circle.fg { fill: none; stroke: var(--acc); stroke-width: 4; }
.index-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0; font-size: .85rem; }
.index-facts > div { display: contents; }
.index-facts dt { margin: 0; color: var(--muted); }
.index-facts dd { margin: 0; font-family: var(--mono); color: var(--ink-2); }
.info-tab { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: start; }
dl.info { margin: 0; display: grid; }
.info-row { display: grid; grid-template-columns: 160px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.info-row dt { color: var(--muted); font-size: .85rem; }
.info-row dd { margin: 0; }
@media (max-width: 1000px) { .info-tab { grid-template-columns: 1fr; } }
.ring text { font: 400 9px var(--font); fill: var(--ink-2); text-anchor: middle; }

/* Durum, güven, değişim */
.mcard.low, .side.low, .metrics li.low-conf { opacity: .55; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
.dot.good { background: var(--good); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
.conf { font-size: .72rem; color: var(--muted); }
.conf.medium { color: var(--warn-text); } .conf.low { color: var(--bad); }
.chip, .tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .75rem; font-weight: 500; background: var(--bg); color: var(--muted); white-space: nowrap; }
.chip.better, .tag.good { background: var(--good-bg); color: var(--good); }
.chip.worse, .tag.bad { background: var(--bad-bg); color: var(--bad); }
.chip.flip, .tag.warn { background: var(--warn-bg); color: var(--warn-text); }
.trend.better { color: var(--good); } .trend.worse { color: var(--bad); } .trend.same { color: var(--muted); } .trend.flip { color: var(--warn-text); }
.spark polyline { fill: none; stroke: var(--acc); stroke-width: 1.5; }

/* Tablolar */
table.results { width: 100%; border-collapse: collapse; background: var(--card); }
table.results th, table.results td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
table.results th { font-weight: 500; color: var(--muted); font-size: .8rem; }
table.results tr.group th { background: var(--bg); color: var(--ink-2); }
table.results td.val { font-family: var(--mono); }
table.results td.good { background: var(--good-bg); } table.results td.warn { background: var(--warn-bg); } table.results td.bad { background: var(--bad-bg); }
.table-scroll { overflow-x: auto; padding: 0; }
.table-scroll table.results tbody th { white-space: nowrap; color: var(--ink); }

/* Tarama */
.scan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.scan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.stage { position: relative; background: #20262C; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 9; }
.stage > video, .stage > canvas, .stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.stage.unmirrored > video, .stage.unmirrored > canvas, .stage.unmirrored > img { transform: none; }
.stage > canvas.editing { cursor: crosshair; touch-action: none; }
/* Telefon dikey tutulunca: dikey kadraj, ekran yüksekliğine sığar. */
.stage.portrait { aspect-ratio: 9 / 16; width: min(100%, calc(78vh * 9 / 16)); margin-inline: auto; }
.grid, .stage-guide { position: absolute; inset: 0; pointer-events: none; }
.grid { background-image: linear-gradient(to right, rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 5% 5%; }
.stage-guide { background-image: linear-gradient(to right, rgba(14,143,168,.65) 1px, transparent 1px), linear-gradient(to bottom, rgba(14,143,168,.65) 1px, transparent 1px); background-size: 10% 10%; }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; font: 300 8rem var(--font); color: #fff; text-shadow: 0 0 20px rgba(0,0,0,.5); }
.tabs { display: flex; gap: 4px; }
.tabs button { padding: 6px 12px; border-radius: 4px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); font: 500 .85rem var(--font); cursor: pointer; }
.tabs button[aria-selected="true"] { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
.quality { font-weight: 500; margin: 0 0 10px; padding: 8px 10px; border-radius: 4px; background: var(--warn-bg); color: var(--warn-text); }
.quality.ready { background: var(--good-bg); color: var(--good); }
.quality.error { background: var(--bad-bg); color: var(--bad); }
.validate #val-run { margin: 10px 0 4px; }
.height-field { display: grid; grid-template-columns: 1fr 96px; align-items: center; gap: 8px; }
.height-field label { margin: 0; }
.device-camera { display: grid; gap: 8px; margin: 8px 0; padding: 12px; border: 1px solid var(--line-2); border-radius: 4px; }
.metrics { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.metrics li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.metrics .val { font-size: 1.05rem; font-family: var(--mono); }
.metrics .desc, .metrics .conf { grid-column: 2 / -1; font-size: .8rem; }
.check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.check input { width: auto; margin-top: 4px; }

/* Taramalar sekmesi */
.scan-item { display: grid; gap: 6px; padding: 12px 14px; }
.scan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.note { margin: 0; }
.photos { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.photo-pair { display: flex; flex-wrap: wrap; gap: 12px; }
.photo-pair figure { margin: 0; }
.photos img { max-width: 360px; width: 100%; border-radius: 4px; border: 1px solid var(--line); }
#scan-detail { margin-top: 16px; }
.note-editor { display: grid; gap: 8px; margin-top: 8px; }
#report-root { display: none; }
#thresholds input { max-width: 110px; }
.reports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.reports .card { display: grid; gap: 6px; align-content: start; }
.ai-card textarea { min-height: 140px; font: inherit; }

@media (max-width: 1100px) { .cards, .reports { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) { .scan-layout, .cols, .grid2 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cards, .reports { grid-template-columns: 1fr; } .rail { width: 52px; } .rail-item { width: 46px; } .app { padding: 16px; } }

/* Raporlar (yalnız yazdırmada görünür) */
.report { color: #000; font: 10pt/1.4 var(--font); }
.letterhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--acc); padding-bottom: 8px; margin-bottom: 10px; }
.lh-left { display: flex; align-items: center; gap: 10px; }
.report-logo { height: 34px; }
.lh-brand { display: grid; line-height: 1.2; }
.lh-brand strong { font-size: 12pt; color: var(--ink-2); }
.lh-brand span { font-size: 9.5pt; color: var(--acc); font-weight: 600; }
.lh-meta { text-align: right; font-size: 8.5pt; color: #444; line-height: 1.35; }
.lh-kind { font-size: 11pt; font-weight: 600; color: var(--ink-2); }
.report h2 { font-size: 11pt; margin: 10px 0 4px; }
.band { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 8px; align-items: center; border: 1px solid var(--line); padding: 8px; margin-bottom: 8px; }
.band-index { display: flex; align-items: center; gap: 8px; }
.kpi .v { font-size: 15pt; font-weight: 300; } .kpi .l, .band .l { font-size: 8pt; color: #555; }
.rsec { display: grid; grid-template-columns: 30mm 52mm 1fr; gap: 5mm; align-items: start; break-inside: avoid; margin-bottom: 4mm; }
.rsec h2 { grid-column: 1 / -1; margin-bottom: 0; }
.sil { margin: 0; text-align: center; font-size: 8pt; color: #555; }
.silhouette { width: 26mm; height: auto; }
.silhouette .body { fill: #D5DADE; }
.silhouette .ideal { stroke: #34C759; stroke-width: 1.2; fill: none; }
.findings { list-style: none; margin: 0; padding: 0; }
.findings li { padding: 3px 6px; } .findings li:nth-child(odd) { background: #F3F9FB; }
.report-photo { width: 100%; height: auto; border: 1px solid #ccc; }
.report-photos { display: flex; gap: 6mm; margin: 8px 0; }
.report-photos figure { margin: 0; width: 40mm; }
.summary { font-weight: 500; margin: 8px 0; }
.report-foot { font-size: 8pt; color: #555; margin-top: 10px; border-top: 1px solid #ddd; padding-top: 4px; }
.report-foot p { margin: 2px 0; }
.lh-sign { font-weight: 600; color: var(--acc); }
.trend-table th, .trend-table td { text-align: center; }
.trend-table tbody th, .trend-table tr th[scope="row"] { text-align: left; }
.figs { display: flex; gap: 2mm; justify-content: center; }
.figs .report-photo { width: 17mm; }
.suggestions ul { margin: 4px 0 0; padding-left: 18px; }
@page { size: A4; margin: 12mm; }
@page trend { size: A4 landscape; margin: 10mm; }
.report.trend { page: trend; }
@media print {
  html, body { background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.printing-report .rail, body.printing-report .topbar, body.printing-report .subject > :not(#report-root) { display: none !important; }
  .rail { display: none; }
  body.printing-report .shell { display: block; }
  body.printing-report .app { padding: 0; max-width: none; }
  body.printing-report #report-root { display: block; }
  .report table.results th, .report table.results td { padding: 3px 5px; color: #000; }
}

/* Kurulum rehberi */
.guide-body { max-width: 900px; }
.guide-body h2 { margin-top: 28px; color: var(--acc); }
.guide-body li { margin: 6px 0; }
table.acceptance td { height: 2em; border: 1px solid var(--line-2); }
@media print {
  body.guide .topbar { display: flex !important; }
  body.guide .guide-body, body.guide .muted { color: #000; }
  table.acceptance td, table.acceptance th { border: 1px solid #999; color: #000; }
}