/* ÜRETİLDİ — elle düzenlemeyin; kaynak: tasarim/kaynak/cbam.css · tools/build_web_assets.py */
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: var(--fs-md); line-height: var(--lh); -webkit-font-smoothing: antialiased; }
/* Öneri A — renkli çerçeve: kart ve alan kenarı eylem renginin koyu tonu, etiketler renkli */
/* Öneri B — gölgeli kenar: ince açık kenar + derinlik gölgesi + üstte ışık çizgisi */
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--primary); }
h1, h2, h3, p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 28px; height: 28px; }

/* Kabuk */
.shell { display: flex; flex-wrap: wrap; min-height: 100%; }
.side { flex: 1 1 232px; max-width: 248px; background: var(--surface); border-right: 1px solid var(--card-bd); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.side a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.side a.on { background: var(--primary-soft); color: var(--primary-soft-ink); }
.side .grp { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 14px 12px 4px; }
.main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; padding: 14px 28px; border-bottom: 1px solid var(--card-bd); background: var(--surface); flex-wrap: wrap; }
.page { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 18px; max-width: 1240px; width: 100%; }
.wm { font-weight: 800; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; }
.wm .sen { color: var(--ink); } .wm .sight { color: var(--sight-red); }
.prod { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--ink-2); margin-left: -4px; } /* D-021: "SenSight Eco", boşluklu */
.legal { display: flex; align-items: center; gap: 8px; padding: 10px 28px; border-top: 1px solid var(--card-bd); font-size: 12.5px; color: var(--ink-3); background: var(--surface); margin-top: auto; }

.side-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 12px 12px; flex-wrap: wrap; }
.side-top-link { font-weight: 700 !important; }
.side-grp > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: var(--r-sm); font-weight: 700; font-size: 14px; color: var(--ink); }
.side-grp[open] > summary .i-sm { transform: rotate(180deg); }
.side-grp a { padding-left: 42px !important; }
.side-foot { display: grid; gap: 6px; padding: 12px; border-top: 1px solid var(--card-bd); margin-top: 6px; }
.seg3 { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--surface-2); }
.seg3 button { flex: 1; min-height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: 700 12.5px var(--font); cursor: pointer; }
.seg3 button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }

/* Başlık + adım göstergesi */
.h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.h2 { font-size: 18px; font-weight: 700; }
.lead { font-size: 16px; color: var(--ink-2); max-width: 64ch; }
.eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.steps li { flex: 1 1 140px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--card-bd); font-size: 13.5px; font-weight: 600; color: var(--ink-3); min-height: 48px; }
.steps .n { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); font-size: 12px; font-weight: 800; flex: none; }
.steps li.done { color: var(--ink-2); } .steps li.done .n { background: var(--ok-soft); color: var(--ok-ink); }
.steps li.now { color: var(--primary-soft-ink); border-color: var(--primary); background: var(--primary-soft); } .steps li.now .n { background: var(--primary); color: var(--primary-ink); }
.steps li.skip .n { background: var(--warn-soft); color: var(--warn-ink); }
.stepcount { font-weight: 800; color: var(--primary); }

/* Kart, alan, düğme */
.card { background: var(--surface); border: 1px solid var(--card-bd); border-radius: var(--r-lg); box-shadow: var(--card-sh); }
.pad { padding: 18px 20px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.field { display: grid; gap: 6px; }
.field > label, .label { font-size: 13.5px; font-weight: 700; color: var(--label); }
.input { min-height: var(--tap); width: 100%; border: 1.5px solid var(--field-bd); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 500 15px var(--font); padding: 0 14px; }
textarea.input { padding: 10px 14px; }
.input.focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input.bad { border-color: var(--err); }
.input[disabled], .input.off { background: var(--surface-2); color: var(--ink-3); border-style: dashed; }
.hint { font-size: 13.5px; color: var(--ink-2); }
.errtext { font-size: 12.5px; color: var(--err); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.btn { min-height: var(--tap); padding: 0 18px; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 700 15px var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn.pri { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--primary); }
.btn.danger { border-color: var(--err); color: var(--err); }
.btn.lg { min-height: var(--tap-lg); padding: 0 24px; font-size: 16px; }
.btn[disabled], .btn.off { opacity: .45; cursor: not-allowed; }
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; display: inline-block; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.actions .grow { flex: 1; }

/* Rozet, bant, kutu */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.badge.ok { background: var(--ok-soft); color: var(--ok-ink); } .badge.warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge.err { background: var(--err-soft); color: var(--err-ink); } .badge.info { background: var(--info-soft); color: var(--info-ink); }
.badge.auto { background: var(--src-auto-soft); color: var(--src-auto); } .badge.hand { background: var(--src-hand-soft); color: var(--src-hand); }
.badge.file { background: var(--src-file-soft); color: var(--src-file); }
.badge.ph { background: transparent; color: var(--warn-ink); border: 1.5px dashed var(--warn); }
.band { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); font-size: 14px; }
.band.ok { background: var(--ok-soft); color: var(--ok-ink); } .band.warn { background: var(--warn-soft); color: var(--warn-ink); }
.band.err { background: var(--err-soft); color: var(--err-ink); } .band.info { background: var(--info-soft); color: var(--info-ink); }
.band.quiet { background: var(--surface-2); color: var(--ink-2); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; font-weight: 600; }
.skel { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); border-radius: 6px; }
.empty { display: grid; justify-items: center; gap: 8px; padding: 28px; text-align: center; border: 1.5px dashed var(--line-strong); border-radius: var(--r); color: var(--ink-2); }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--field-bd); border-radius: var(--r); background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; min-height: var(--tap-lg); }
.opt.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; margin-top: 1px; background: var(--surface); }
.radio.on { border: 7px solid var(--primary); }
.check { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.check.on { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.check.bad { background: var(--err-soft); border-color: var(--err); color: var(--err); }
.check.wait { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }
.big { font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); }
.stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.bar { height: 14px; border-radius: 7px; background: var(--surface-3); overflow: hidden; display: flex; }
.bar > span { display: block; height: 100%; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.tablet { --tap: 56px; --tap-lg: 64px; font-size: 16px; }
.tablet .btn { font-size: 16px; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Telefon (<600 px): sağ kenarda dikey ikon şeridi, alt çubuk yok (§15.1 navShell) */
.phone { position: relative; width: 390px; height: 844px; overflow: hidden; background: var(--bg); }
.pcontent { position: absolute; top: 0; bottom: 0; left: 0; right: 64px; overflow: hidden; display: flex; flex-direction: column; }
.phone.sol .pcontent { left: 64px; right: 0; }
.prail { position: absolute; top: 0; bottom: 0; right: 0; width: 64px; background: var(--surface); border-left: 1px solid var(--card-bd); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; }
.phone.sol .prail { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--card-bd); }
.prail a, .prail button { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); background: transparent; border: 0; cursor: pointer; }
.prail .on { background: var(--primary); color: var(--primary-ink); }
.prail .back { background: var(--surface-2); color: var(--ink); }
.drawer { position: absolute; top: 0; bottom: 0; right: 0; width: 318px; background: var(--surface); box-shadow: -12px 0 32px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; }
.scrim { position: absolute; inset: 0; background: rgba(8, 12, 18, .5); }