/* X-GPS / 2026-10-28 / KAMION CAN-ADATABLAK */
:is(#unas_design,body.design_ver5) .home-hero .hero-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:28px}
:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:620px;aspect-ratio:auto;transform:none!important;opacity:1!important;isolation:isolate;overflow:visible}
:is(#unas_design,body.design_ver5) .home-hero .can-visual .truck-wrap{inset:auto 0 0 0;width:100%;height:auto;aspect-ratio:1672/941;overflow:visible;z-index:0}
:is(#unas_design,body.design_ver5) .home-hero .can-visual .truck{width:100%;height:auto;display:block;object-fit:contain;object-position:center}
:is(#unas_design,body.design_ver5) .home-hero .can-visual .xgps-lamp-overlay{position:absolute;inset:0;width:100%;height:100%}
:is(#unas_design,body.design_ver5) .home-hero .can-visual .visual-label{bottom:-20px;left:0}
.can-panel{position:absolute;right:0;top:0;width:310px;z-index:3;background:#fff;color:#142e46;border:1px solid #dbe9f9;border-radius:20px;box-shadow:0 18px 50px #174b831a;font:13px/1.4 system-ui,sans-serif;animation:can-appear .8s ease both}
.can-panel *{box-sizing:border-box}.can-panel header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px 18px 14px}.can-panel .can-eyebrow{font-size:9px;color:#526b85;letter-spacing:1.4px;font-weight:650}.can-panel h2{font:700 19px/1.3 system-ui,sans-serif;margin:5px 0 0;color:#142e46;letter-spacing:-.5px}.can-status{font-size:9px;color:#0963a4;display:flex;gap:5px;align-items:center}.can-status i{width:6px;height:6px;background:#168beb;border-radius:50%}.can-driving{display:flex;align-items:center;justify-content:space-between;padding:8px 18px;background:#edf5ff;color:#0963a4;font-size:11px}.can-pause{border:1px solid #bad7f5;background:#fff;color:#0963a4;border-radius:6px;font:inherit;padding:4px 9px;cursor:pointer}.can-pause:focus-visible{outline:3px solid #168beb;outline-offset:3px}.can-metrics{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:5px 16px}.can-metric{display:flex;align-items:flex-start;gap:8px;padding:15px 0;border-bottom:1px solid #edf1f8;min-width:0}.can-metric>svg,.can-axles>svg{width:19px;height:22px;flex:none;stroke:#168beb;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.can-metric>div{flex:1;min-width:0}.can-metric span,.can-axles span{font-size:10px;color:#526b85;display:block}.can-metric strong{display:flex;align-items:baseline;gap:4px;font-size:21px;margin-top:4px;line-height:1.2;white-space:nowrap}.can-panel b{font-weight:650;font-variant-numeric:tabular-nums}.can-panel small{font-size:10px;color:#526b85;font-weight:400}.can-bar{height:3px;background:#e5effb;display:block;margin:8px 15px 0 0;border-radius:5px;overflow:hidden}.can-bar>i{display:block;height:100%;background:#168beb;border-radius:5px;transition:width 1s linear}.can-axles{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 16px 16px;padding:12px 8px;background:#f2f7ff;border-radius:10px}.can-axles strong{display:block;margin-top:4px;font-size:17px}.can-panel footer{display:flex;gap:8px;align-items:center;padding:12px 18px;border-top:1px solid #e5edf7;color:#526b85;font-size:10px}.can-panel [data-can-clock]{margin-left:auto;font-variant-numeric:tabular-nums}.can-packet{color:#168beb;font-size:19px}.can-panel .can-note{font-size:9px;line-height:1.5;margin:0;padding:0 18px 14px;color:#526b85}.can-link{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none;fill:none}.can-wire{stroke:#96bfee;stroke-width:1.5}.can-led{stroke:#168beb;stroke-width:4;stroke-linecap:round;stroke-dasharray:10 90;filter:drop-shadow(0 0 4px #168beb);animation:can-travel 2.4s ease-in-out infinite alternate}.can-point{fill:#fff;stroke:#168beb;stroke-width:2;filter:drop-shadow(0 0 5px #168beb)}.can-visual.can-stopped .can-led{animation-play-state:paused}.can-visual.can-stopped .can-bar>i{transition:none}@keyframes can-travel{from{stroke-dashoffset:10}to{stroke-dashoffset:-90}}@keyframes can-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:650px}.can-panel{right:15px;width:330px}}
@media(max-width:1100px){:is(#unas_design,body.design_ver5) .home-hero .hero-grid{grid-template-columns:1fr 1.2fr;gap:12px}.can-panel{width:280px}.can-panel header{padding:16px 14px 12px}.can-metric{gap:5px}.can-metric strong{font-size:19px}}
@media(max-width:800px){:is(#unas_design,body.design_ver5) .home-hero .hero-grid{display:flex;flex-direction:column;align-items:stretch}:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:670px;width:100%;max-width:650px;margin:24px auto 0}.can-panel{width:310px;right:0}.can-link{z-index:2}}
@media(max-width:480px){:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:660px}.can-panel{left:0;right:0;width:100%}.can-panel .can-metrics{padding:5px 18px}.can-metric{padding:12px 0}.can-metric strong{font-size:21px}:is(#unas_design,body.design_ver5) .home-hero .can-visual .truck-wrap{bottom:0}.can-panel .can-note{font-size:10px}.can-panel footer{font-size:11px}}
@media(prefers-reduced-motion:reduce){.can-panel{animation:none}.can-led{animation:none;stroke-dasharray:none;stroke-width:2}.can-bar>i{transition:none}}

/* 2026-10-28 / KÖZÉPSŐ ADATABLAK, JOBB OLDALI KAMION, KÖRBEFUTÓ KERETFÉNY */
:is(#unas_design,body.design_ver5) .home-hero .hero-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:32px}
:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:600px;max-width:none}
:is(#unas_design,body.design_ver5) .home-hero .can-visual .can-panel{left:0;right:auto;top:42px;width:300px;border:2px solid #88baf0;border-radius:20px}
:is(#unas_design,body.design_ver5) .home-hero .can-visual .truck-wrap{left:auto;right:-200px;bottom:25px;top:auto;width:85%;min-width:650px;height:auto}
.can-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5;fill:none}
.can-frame rect{stroke:#168beb;stroke-width:3;stroke-linecap:round;stroke-dasharray:9 91;filter:drop-shadow(0 0 4px #168beb);animation:can-border-run 5s linear infinite}
.can-visual.can-stopped .can-frame rect{animation-play-state:paused}
@keyframes can-border-run{to{stroke-dashoffset:-100}}
@media(min-width:1700px){:is(#unas_design,body.design_ver5) .home-hero .can-visual .can-panel{width:330px;left:15px}:is(#unas_design,body.design_ver5) .home-hero .can-visual .truck-wrap{right:-170px;width:83%}}
@media(max-width:1100px){:is(#unas_design,body.design_ver5) .home-hero .hero-grid{display:flex;flex-direction:column;align-items:stretch}:is(#unas_design,body.design_ver5) .home-hero .hero-copy{max-width:650px}:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:560px;margin-top:15px}:is(#unas_design,body.design_ver5) .home-hero .can-visual .can-panel{left:2%;top:10px}:is(#unas_design,body.design_ver5) .home-hero .can-visual .truck-wrap{width:78%;right:-170px;min-width:620px;bottom:0}}
@media(max-width:700px){:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:730px}:is(#unas_design,body.design_ver5) .home-hero .can-visual .can-panel{top:0;left:50%;width:310px;transform:translateX(-50%);animation:none}:is(#unas_design,body.design_ver5) .home-hero .can-visual .truck-wrap{width:110%;min-width:0;right:-80px;bottom:0}}
@media(max-width:400px){:is(#unas_design,body.design_ver5) .home-hero .can-visual .can-panel{left:0;width:100%;transform:none}:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:700px}}
@media(prefers-reduced-motion:reduce){.can-frame rect{animation:none;stroke-dasharray:none;filter:none;stroke-width:1}}

/* FÜLKEKÖZPONTÚ KIVÁGÁS – a vontató hátulja a képernyőn kívül. */
:is(#unas_design,body.design_ver5) .home-hero{overflow:hidden}
@media(min-width:1101px){
 :is(#unas_design,body.design_ver5) .home-hero .can-visual .truck-wrap{left:345px;right:auto;top:0;bottom:auto;width:1100px;min-width:0;height:auto}
}
@media(min-width:1700px){
 :is(#unas_design,body.design_ver5) .home-hero .can-visual .truck-wrap{left:390px;width:1250px;top:-30px}
}
@media(min-width:701px) and (max-width:1100px){
 :is(#unas_design,body.design_ver5) .home-hero .can-visual .truck-wrap{left:350px;right:auto;top:10px;bottom:auto;width:1000px;min-width:0}
}
@media(max-width:700px){
 :is(#unas_design,body.design_ver5) .home-hero .can-visual{height:830px}
 :is(#unas_design,body.design_ver5) .home-hero .can-visual .truck-wrap{left:18%;right:auto;top:auto;bottom:0;width:700px;min-width:0}
}

/* Egyetlen folyamatos LED: kormány → keret körbe → kormány. */
.can-link{z-index:4}
.can-led{stroke-dasharray:5 95;animation:can-continuous-loop 9s linear infinite}
@keyframes can-continuous-loop{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@media(prefers-reduced-motion:reduce){.can-led{animation:none;stroke-dasharray:none;stroke-width:1}}

/* Egyetlen keret: a közös SVG-vonal rajzolja, nincs második CSS-szegély. */
:is(#unas_design,body.design_ver5) .home-hero .can-visual .can-panel{border:0;box-shadow:0 18px 50px #174b831a}
.can-wire{stroke:#88baf0;stroke-width:1.5}

/* Kurzorral vagy érintéssel nyitható járműadatlap. */
.can-summary[hidden],.can-detail[hidden]{display:none!important}
.can-inspect{display:flex;justify-content:space-between;align-items:center;width:calc(100% - 32px);margin:0 16px 16px;border:1px solid #c7dcf5;background:#f2f7ff;border-radius:9px;padding:10px 12px;color:#0963a4;font:600 12px system-ui;cursor:pointer}
.can-detail{overflow:hidden;border-radius:20px;background:#fff;color:#142e46}
.can-road-head{height:180px;position:relative;overflow:hidden;background:#dcecff}
.can-road{display:block;width:100%;height:100%;object-fit:cover}
.can-road-shade{position:absolute;inset:0;background:linear-gradient(180deg,#102a4cd9,transparent 85%)}
.can-vehicle-title{position:absolute;top:16px;left:16px;right:32px;color:#fff}
.can-panel .can-vehicle-title h2{margin:0 0 7px;color:#fff;font-size:18px;letter-spacing:-.3px}
.can-vehicle-title strong{display:inline-block;border:1px solid #ffffff88;border-radius:5px;padding:3px 8px;font:700 13px system-ui;letter-spacing:1px;background:#fff;color:#142e46}
.can-vehicle-title>span{display:flex;align-items:center;gap:6px;font-size:10px;margin-top:9px}.can-vehicle-title i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7ec2ff}
.can-detail-close{position:absolute;right:9px;top:8px;border:0;background:#ffffff24;color:#fff;width:27px;height:27px;border-radius:7px;font:24px/1 system-ui;cursor:pointer}
.can-detail-list{margin:0;padding:0}.can-detail-list>div{padding:14px 17px;border-bottom:1px solid #e4ebf4}.can-detail-list dt{font:650 12px/1.4 system-ui;color:#142e46;display:flex;align-items:center;gap:10px}.can-detail-list dt>span{color:#168beb;font-size:20px;width:20px;text-align:center}.can-detail-list dd{margin:7px 0 0 30px;font:13px/1.5 system-ui;color:#526b85}.can-detail-list small{display:block;margin-top:3px;font-size:10px}.can-detail-bottom{padding:12px 16px;font-size:10px;color:#526b85;background:#f4f8ff}.can-inspect:focus-visible,.can-detail-close:focus-visible{outline:3px solid #168beb;outline-offset:3px}
@media(max-width:700px){:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:900px}}

/* Valódi videóelem: a teljes fülkekép vágás nélkül. */
.can-road-head{height:auto;aspect-ratio:16/9}.can-road{object-fit:contain}.can-road-shade{pointer-events:none;background:linear-gradient(180deg,#102a4cb3,transparent 70%)}

/* ===== 2026-10-28: kamerakép elöl, járműadatok a hátoldalon ===== */
.can-vehicle-title strong{display:block;padding:0;border:0;border-radius:0;background:none;color:white;font:650 12px/1.5 system-ui;letter-spacing:0}
.can-camera-caption{padding:22px 17px}.can-camera-caption>span{font-weight:700}.can-camera-caption p{font-size:12px;color:#526b85;margin:8px 0 20px}
.can-camera-caption .can-detail-close{position:static;width:100%;height:auto;padding:12px 10px;border-radius:10px;background:#168beb;color:white;font:600 12px/1.4 system-ui;border:0}
.can-extra-data{margin-top:16px}.can-extra-data h3{font-size:13px;margin:0 0 8px}.can-extra-data dl{margin:0}.can-extra-data dl>div{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid #e4ebf4;font:11px/1.4 system-ui}.can-extra-data dt{color:#526b85}.can-extra-data dd{margin:0;color:#142e46;text-align:right;font-weight:650}
.can-summary{max-height:620px;overflow:auto;scrollbar-width:thin}.can-panel:has(.can-detail:not([hidden])){padding:0}.can-detail .can-road-head{aspect-ratio:16/9}.can-detail .can-road{object-fit:contain}.can-vehicle-title{top:10px;left:12px;right:10px}.can-panel .can-vehicle-title h2{font-size:17px;margin-bottom:5px}.can-vehicle-title>span{margin-top:4px}

/* ===== JAVÍTÁS: stabil LED-keret, tömör adatlap, nincs belső görgetés ===== */
.can-panel{animation:none!important}
.can-summary{max-height:none;overflow:visible}
.can-panel header{padding:13px 16px 9px}
.can-panel h2{font-size:17px}
.can-metrics{padding:3px 16px}
.can-metric{padding:9px 0}
.can-metric strong{font-size:18px;margin-top:2px}
.can-bar{margin-top:5px}
.can-extra-data{margin:9px 16px 10px}
.can-extra-data h3{font-size:12px;margin-bottom:6px}
.can-extra-data dl{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}
.can-extra-data dl>div{display:block;padding:4px 0 6px;font-size:10px}
.can-extra-data dd{text-align:left;margin-top:3px;font-size:12px}
.can-axles{margin:5px 16px 9px;padding:8px}
.can-panel footer{padding:7px 16px}
.can-panel .can-note{padding:0 16px 9px;line-height:1.35}
.can-inspect{margin-bottom:12px;padding:8px 10px}
.can-panel:focus{outline:none}
:is(#unas_design,body.design_ver5) .home-hero .can-visual .visual-label{display:none}
@media(max-width:480px){.can-panel .can-metrics{padding:3px 16px}.can-metric{padding:9px 0}.can-metric strong{font-size:18px}.can-panel .can-note{font-size:9px}.can-panel footer{font-size:10px}}

/* ===== VÉGLEGES ELRENDEZÉS: videó + CAN elöl, további adatok hátul ===== */
.can-panel{height:650px;overflow:visible}
.can-summary,.can-detail{height:100%;background:#fff;border-radius:20px;overflow:hidden}
.can-detail .can-road-head{aspect-ratio:16/9}
.can-front-flip{position:static;display:block;width:calc(100% - 32px);height:auto;margin:0 16px 12px;padding:9px 10px;border:1px solid #c7dcf5;background:#f2f7ff;color:#0963a4;border-radius:9px;font:600 12px/1.4 system-ui;cursor:pointer}
.can-detail header{padding:10px 16px 8px}.can-detail .can-metric{padding:7px 0}.can-detail .can-metric strong{font-size:17px}.can-detail .can-axles{padding:7px 8px;margin-bottom:8px}.can-detail .can-note{font-size:8px;padding-bottom:7px}
.can-summary .can-extra-data{margin:14px 16px}.can-summary .can-extra-data dl{display:block}.can-summary .can-extra-data dl>div{display:flex;align-items:center;justify-content:space-between;padding:13px 0;font-size:11px}.can-summary .can-extra-data dd{margin:0;font-size:12px}
.can-summary .can-inspect{margin-top:18px}
:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:725px}
@media(max-width:700px){:is(#unas_design,body.design_ver5) .home-hero .can-visual{height:1040px}}