@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/poppins-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/poppins-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/poppins-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/poppins-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/poppins-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/poppins-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}/* 3. KAMERADIAGNOSZTIKA – sötétzöld és menta, kamerás monitor, fénykör a cső belsejében */
@property --fenykor{syntax:'<length-percentage>';inherits:false;initial-value:0%}
:root{
  --hatter:#0B2219; --felulet:#10301F; --felulet2:#0E2A1F; --szoveg:#E4F3EC; --halvany:#A3C2B5; --vonal:#1F4A3A;
  --kiemel:#5EEAB0; --link:#7BF0C0;
  --hivas-bg:#5EEAB0; --hivas-szoveg:#06231A; --hivas-arnyek:rgba(94,234,176,.28);
  --gomb2-szoveg:#E4F3EC; --gomb2-keret:#5EEAB0;
  --fejlec-bg:rgba(9,30,22,.92); --fejlec-szoveg:#E4F3EC; --fejlec-vonal:rgba(94,234,176,.35);
  --hos-bg:#0B2219; --hos-szoveg:#fff; --hos-halvany:#B9D6CA; --hos-felirat:#5EEAB0;
  --hos-gomb2-szoveg:#E4F3EC; --hos-gomb2-keret:#5EEAB0;
  --panel-bg:#0F2C21; --panel-szoveg:#E4F3EC; --panel-arnyek:0 0 0 1px rgba(94,234,176,.35),0 30px 60px rgba(0,0,0,.4);
  --ikon-bg:#0B2219; --ikon-szin:#5EEAB0; --viz:#5EEAB0;
  --zaro-bg:#07190F;
  --font-cim:'Poppins',system-ui,sans-serif; --font-szoveg:'Poppins',system-ui,sans-serif;
  --cim-suly:700; --cim-betukoz:-.02em; --cim-sormagassag:1.06;
  --r:14px; --r-gomb:14px; --r-panel:22px;
}
body{font-size:16.5px}
.hos{background:radial-gradient(900px 600px at 78% 40%,#123C2D,transparent 65%),linear-gradient(180deg,#0B2219,#0D271D)}
.hos-cim{font-size:clamp(34px,3.8vw,56px)}
.hos .hc-2{color:#5EEAB0}
.hos-ecset{display:block;width:90px}
.hos-ecset path{stroke:#5EEAB0;stroke-width:6}
.hos-szoveg{max-width:600px;position:relative;z-index:2}
.hos-belso{min-height:clamp(600px,80vh,740px)}
/* radar-gyűrűk */
.km-gyuruk{position:absolute;right:6%;top:50%;width:min(56vw,760px);aspect-ratio:1;transform:translateY(-50%)}
.km-gyuruk i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(94,234,176,.18)}
.km-gyuruk i:nth-child(2){inset:12%;border-style:dashed;border-color:rgba(94,234,176,.22);animation:km-forog 40s linear infinite}
.km-gyuruk i:nth-child(3){inset:26%;border-color:rgba(94,234,176,.12)}
@keyframes km-forog{to{transform:rotate(360deg)}}
/* monitor */
.km-monitor{position:absolute;right:max(24px,calc((100vw - 1240px)/2 + 24px));top:50%;transform:translateY(-50%) perspective(1400px) rotateY(-8deg);width:min(46vw,620px);padding:18px 18px 54px;border-radius:26px;background:linear-gradient(160deg,#1E2422,#0C0F0E);box-shadow:0 0 0 2px #2A302E,0 40px 80px rgba(0,0,0,.55),0 0 80px rgba(94,234,176,.12)}
.km-kepernyo{position:relative;aspect-ratio:16/10.5;border-radius:12px;overflow:hidden;background:#000}
.km-kepernyo picture,.km-kepernyo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
/* a fénykör fokozatosan világítja meg a cső belsejét */
.km-kepernyo picture{-webkit-mask-image:radial-gradient(circle at 50% 46%,#000 var(--fenykor),transparent calc(var(--fenykor) + 18%));mask-image:radial-gradient(circle at 50% 46%,#000 var(--fenykor),transparent calc(var(--fenykor) + 18%));animation:km-feny 3.2s cubic-bezier(.4,.1,.2,1) .5s forwards}
@keyframes km-feny{to{--fenykor:85%}}
.km-feny{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(255,255,230,.32),transparent 30%);mix-blend-mode:screen;animation:km-lelegzik 4s ease-in-out 3.5s infinite alternate}
@keyframes km-lelegzik{from{opacity:.4}to{opacity:1}}
.km-hud{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;font:600 13px/1 'Poppins',monospace;color:#5EEAB0;text-shadow:0 1px 2px #000}
.km-rec{animation:km-villog 1.4s steps(2) infinite}
@keyframes km-villog{50%{opacity:.25}}
.km-celkereszt{position:absolute;left:50%;top:46%;width:64px;height:64px;transform:translate(-50%,-50%);border:1.5px solid rgba(94,234,176,.65);border-radius:50%}
.km-celkereszt::before,.km-celkereszt::after{content:"";position:absolute;background:rgba(94,234,176,.65)}
.km-celkereszt::before{left:50%;top:-14px;bottom:-14px;width:1.5px}
.km-celkereszt::after{top:50%;left:-14px;right:-14px;height:1.5px}
.km-kepernyo::after{content:"";position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(180deg,transparent,rgba(94,234,176,.16),transparent);animation:km-szken 4.5s linear 3.6s infinite}
@keyframes km-szken{to{top:100%}}
.km-gombsor{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:12px}
.km-gombsor i{width:34px;height:22px;border-radius:6px;background:#2A302E;box-shadow:inset 0 1px 0 #3A413E}
.km-monitor .szemlelteto{bottom:auto;top:-30px;right:0}
.km-cso{display:block;width:min(420px,100%);height:90px;margin-top:18px;overflow:visible}
.km-cso path{fill:none;stroke:#5EEAB0;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:rajz 2s ease 1s forwards;opacity:.85}
.km-kamerafej circle{fill:#0B2219;stroke:#5EEAB0;stroke-width:2.5}
.km-kamerafej path{fill:none;stroke:#5EEAB0;stroke-width:1.8;stroke-linejoin:round}
.hibak{margin-top:-70px}
.hibak .szakasz-fej h2{display:flex;gap:18px;align-items:center}
.hiba-kartya{background:#0B2219;border-color:#24563F}
.hiba-kartya:hover,.hiba-kartya.mozog,.hiba-kartya.nyitva{border-color:#5EEAB0;box-shadow:0 0 0 1px #5EEAB0,0 0 30px rgba(94,234,176,.15)}
.hiba-ikon{border:1px solid #24563F}
.hiba-ikon .wf{fill:#5EEAB0}
.oldalfej{background:radial-gradient(800px 400px at 85% 10%,#14412F,transparent 60%),#0B2219;border-bottom:1px solid #1F4A3A}
.oldalfej-cso path{stroke:#5EEAB0}
.telefonon,.tervezett-doboz{background:#0E2A1F}
.lablec{background:#06160F}
.mezo input,.mezo textarea,.mezo select{background:#0B2219}
.urlap-hiba{background:#3A1515;color:#FFB4B4}
.mezo-hiba{color:#FF9C9C}
@media (max-width:900px){
  .km-gyuruk{display:none}
  .hos-belso{padding-bottom:250px}
  .km-monitor{top:auto;bottom:20px;right:18px;left:18px;width:auto;transform:none;padding:10px 10px 30px;border-radius:18px}
  .km-kepernyo{aspect-ratio:16/8}
  .km-gombsor{bottom:7px}.km-gombsor i{width:22px;height:12px}
  .km-cso{display:none}
  .km-monitor .szemlelteto{top:auto;bottom:6px;right:10px}
  .hibak{margin-top:0}
}