/* Hibakereső – interactive x-ray car. Every selector is scoped with the hk- prefix so site.css stays untouched. */
.hk-page {
  --ink: #ffffff;
  --text: #c9cfd8;
  --muted: rgba(255, 255, 255, .6);
  --line: rgba(255, 255, 255, .11);
  --line-2: rgba(255, 255, 255, .2);
  --yellow: #f3ae1b;
  --yellow-hi: #f7c34c;
  --yellow-lo: #d69922;
  --yellow-soft: rgba(243, 174, 27, .15);
  --on-yellow: #171a1e;
  --card: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 50px -28px #000;
  --r: 18px;
  --f: Arial, Helvetica, sans-serif;
  color-scheme: dark;
  max-width: 1320px; margin: 0 auto; padding: 46px 32px 72px;
  display: grid; gap: 30px;
  color: var(--text); font-family: var(--f); font-size: 16px; line-height: 1.6;
}
.hk-page *, .hk-page *::before, .hk-page *::after { box-sizing: border-box; }
.hk-page [hidden] { display: none !important; }
.hk-page p { margin: 0; }

.hk-head { display: grid; }
.hk-eyebrow { font: 700 11.5px/1.2 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.hk-head h1 { font: 800 clamp(38px, 5.4vw, 64px)/1.02 var(--f); letter-spacing: -.045em; color: var(--ink); margin: 8px 0 0; text-wrap: balance; }
.hk-bar { display: block; width: 70px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--yellow), rgba(243, 174, 27, 0)); margin-top: 18px; }
.hk-sub { margin-top: 16px !important; max-width: 64ch; }

.hk-app { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: clamp(560px, calc(100vh - 200px), 820px); scroll-margin-top: 190px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; }

.hk-stage { position: relative; min-width: 0; overflow: hidden; touch-action: none;
  background: radial-gradient(70% 70% at 55% 55%, #1b222b 0%, #10151b 60%, #0b0f14 100%); }
#hk-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#hk-canvas.hk-pointing { cursor: pointer; }
.hk-labels { position: absolute; inset: 0; pointer-events: none; }
.hk-lbl { position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(14, 18, 24, .82); backdrop-filter: blur(6px); color: var(--ink); font: 700 12.5px/1.2 var(--f); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.hk-lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft), 0 0 10px var(--yellow); }
.hk-lbl:hover, .hk-lbl.hk-on { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
.hk-lbl:hover::before, .hk-lbl.hk-on::before { background: var(--on-yellow); box-shadow: none; }
.hk-tip { position: absolute; left: 0; top: 0; pointer-events: none; padding: 7px 11px; border-radius: 10px; background: rgba(14, 18, 24, .92); border: 1px solid rgba(243, 174, 27, .5); color: var(--ink); font: 700 14px/1.25 var(--f); white-space: nowrap; box-shadow: 0 10px 30px -10px #000; }
.hk-tip small { display: block; font: 400 12px/1.35 var(--f); color: var(--muted); }

.hk-legend { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); left: 18px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); pointer-events: none; }
.hk-legend span { display: inline-flex; align-items: center; gap: 7px; }
.hk-sw { width: 11px; height: 11px; border-radius: 3px; background: var(--yellow); box-shadow: 0 0 8px rgba(243, 174, 27, .6); }
.hk-sw.hk-ctx { background: #4f5966; box-shadow: none; }
.hk-hint { position: absolute; right: 18px; top: 16px; font-size: 12px; color: var(--muted); pointer-events: none; text-align: right; max-width: 46%; }
.hk-controls { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hk-btn { appearance: none; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .08); color: var(--ink); font: 700 14px/1 var(--f); padding: 11px 15px; border-radius: 12px; cursor: pointer; }
.hk-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.hk-slider { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(14, 18, 24, .7); font: 700 11.5px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hk-slider input { width: 150px; accent-color: var(--yellow); }
.hk-nogl { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); }
:is(.hk-btn, .hk-tab, .hk-row, .hk-chip, .hk-comp, .hk-lbl, .hk-cta, .hk-cta-o, .hk-go, .hk-back, input):focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.hk-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: rgba(10, 13, 18, .45); }
.hk-tabs { display: flex; gap: 6px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.hk-tab { appearance: none; flex: 1; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: 700 15px/1 var(--f); padding: 13px 10px 15px; cursor: pointer; position: relative; }
.hk-tab:hover { color: var(--ink); }
.hk-tab[aria-selected="true"] { background: rgba(255, 255, 255, .08); color: var(--ink); }
.hk-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--yellow); }
.hk-panel-body { flex: 1; overflow: auto; padding: 18px 18px 24px; display: grid; align-content: start; gap: 20px; }

.hk-kicker { font: 700 11px/1.2 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.hk-rows { display: grid; gap: 8px; }
.hk-row { appearance: none; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); color: inherit; padding: 13px 14px 13px 16px; border-radius: 13px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; cursor: pointer; font: inherit; position: relative; transition: border-color .15s, background .15s; }
.hk-row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 2px 2px 0; background: var(--yellow); opacity: .35; transition: opacity .15s; }
.hk-row:hover, .hk-row.hk-hot { border-color: rgba(243, 174, 27, .55); background: linear-gradient(160deg, rgba(243, 174, 27, .12), rgba(243, 174, 27, .03)); }
.hk-row:hover::before, .hk-row.hk-hot::before { opacity: 1; }
.hk-row b { font: 800 19px/1.15 var(--f); letter-spacing: -.02em; color: var(--ink); }
.hk-row .hk-meta { grid-column: 1; font-size: 13px; color: var(--muted); }
.hk-row .hk-go-ico { grid-row: 1 / span 2; grid-column: 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--yellow); font-weight: 700; transition: background .15s, color .15s, border-color .15s; }
.hk-row:hover .hk-go-ico, .hk-row.hk-hot .hk-go-ico { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }

.hk-back { appearance: none; border: 0; background: none; color: var(--muted); font: 700 13px/1 var(--f); padding: 0; cursor: pointer; justify-self: start; }
.hk-back:hover { color: var(--yellow); }
.hk-detail h2 { padding: 0;  font: 800 34px/1.05 var(--f); letter-spacing: -.035em; color: var(--ink); margin: 8px 0 0; text-wrap: balance; }
.hk-detail .hk-bar { margin: 14px 0 14px; width: 34px; }
.hk-detail p.hk-lead { margin: 0; }
.hk-time { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 12px; }
.hk-time::before { content: ""; width: 8px; height: 8px; border: 2px solid var(--yellow); border-radius: 50%; }
.hk-sec { display: grid; gap: 10px; }
.hk-comps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hk-comp { appearance: none; width: 100%; text-align: left; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: inherit; font: inherit; border-radius: 12px; padding: 10px 12px; display: grid; gap: 1px; cursor: pointer; transition: border-color .15s, background .15s; }
.hk-comp b { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.hk-comp b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 8px rgba(243, 174, 27, .7); flex: none; }
.hk-comp.hk-noshape b::before { background: transparent; border: 1.5px dashed var(--muted); box-shadow: none; }
.hk-comp span { font-size: 13.5px; color: var(--muted); padding-left: 17px; line-height: 1.45; }
.hk-comp:hover, .hk-comp.hk-on { border-color: var(--yellow); background: var(--yellow-soft); }
.hk-comp.hk-noshape { cursor: default; }
.hk-comp.hk-noshape:hover { border-color: var(--line); background: rgba(255, 255, 255, .03); }
.hk-symp { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.hk-symp li::marker { color: var(--yellow); }
.hk-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.hk-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.hk-steps li::before { content: counter(s); font: 800 13px/26px var(--f); text-align: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--yellow); color: var(--yellow); }
.hk-steps b { color: var(--ink); }
.hk-book { display: grid; gap: 10px; padding: 16px; border-radius: 14px; border: 1px solid rgba(243, 174, 27, .4); background: linear-gradient(160deg, rgba(243, 174, 27, .14), rgba(243, 174, 27, .03)); }
.hk-book p { margin: 0; font-size: 14px; }
.hk-cta { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(180deg, var(--yellow-hi), var(--yellow-lo)); color: var(--on-yellow); font: 800 15px/1 var(--f); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px -10px rgba(243, 174, 27, .7); }
.hk-cta:hover { filter: brightness(1.06); }
.hk-phone-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.hk-phone { font: 700 15px/1 var(--f); color: var(--yellow); user-select: all; font-variant-numeric: tabular-nums; }
.hk-more { color: var(--muted); font-size: 13.5px; margin: 0; }
.hk-more a { color: var(--yellow); }

.hk-sense { display: grid; gap: 9px; }
.hk-chips { display: flex; flex-direction: column; gap: 7px; }
.hk-chip { appearance: none; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--ink); font: 400 14px/1.25 var(--f); padding: 10px 13px; border-radius: 11px; cursor: pointer; text-align: left; width: 100%; transition: border-color .15s, background .15s; }
.hk-chip:hover { border-color: var(--yellow); }
.hk-chip[aria-pressed="true"] { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow-lo)); border-color: var(--yellow); color: var(--on-yellow); font-weight: 700; }
.hk-result { border: 1px solid rgba(243, 174, 27, .45); border-radius: 14px; padding: 16px; display: grid; gap: 11px; background: linear-gradient(160deg, rgba(243, 174, 27, .14), rgba(243, 174, 27, .03)); }
.hk-result h3 { margin: 0; font: 800 23px/1.1 var(--f); letter-spacing: -.03em; color: var(--ink); }
.hk-result .hk-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.hk-result .hk-parts span { font: 700 12.5px/1 var(--f); padding: 6px 9px; border-radius: 8px; background: var(--yellow); color: var(--on-yellow); }
.hk-go { appearance: none; border: 1px solid var(--yellow); background: transparent; color: var(--yellow); border-radius: 12px; padding: 11px 13px; font: 700 15px/1.1 var(--f); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.hk-go:hover { background: var(--yellow); color: var(--on-yellow); }


@media (max-width: 900px) {
  .hk-page { padding: 28px 16px 48px; }
  .hk-app { grid-template-columns: 1fr; height: auto; }
  .hk-stage { height: min(64vh, 520px); min-height: 380px; }
  .hk-panel { border-left: 0; border-top: 1px solid var(--line); }
  .hk-panel-body { overflow: visible; }
  .hk-hint { display: none; }
  .hk-slider input { width: 110px; }
}
@media (prefers-reduced-motion: reduce) { .hk-page * { transition: none !important; } }