/* Szanyi Elektronik – Biztonságtechnika: egységes aloldal shell */
:root{--navy:#062b49;--blue:#0c5d97;--orange:#ff5a1f;--ink:#10283d;--muted:#607284;--line:#dfe7ed;--bg:#f4f7f9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff}
.security-exact{background:#fff}

/* Ugyanaz a 1160 px-es tartalmi szélesség, mint a Klíma és Kapuautomatizálás oldalon. */
.security-visual,
.real-forms{
  width:min(1160px,calc(100% - 40px));
  margin-left:auto;
  margin-right:auto;
}
.security-visual{background:#fff}
.security-hero-image{overflow:hidden;border-radius:0 0 12px 12px;background:#073052}
.security-hero-image img,
.security-content-image img{display:block;width:100%;height:auto}
.security-content-image{position:relative;background:#fff}

.hotspot{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:999px}
.hotspot:hover{box-shadow:0 0 0 3px rgba(255,255,255,.75),0 0 0 6px rgba(4,55,91,.32)}
/* Az eredeti 2048x2580-as kép 580 px-nél lett kettévágva. */
.hs-dsc{left:10.8%;top:62.92%;width:31.8%;height:4.58%}
.hs-hik{left:58.2%;top:62.92%;width:32.4%;height:4.58%}
.hs-quote{left:72.8%;top:82.65%;width:20.2%;height:5.35%}

/* Ajánlatkérő: teljes tartalmi szélesség, nem keskeny belső doboz. */
.real-forms{margin-top:18px;margin-bottom:18px;padding:34px 32px 38px;background:#f4f7f9;border:1px solid #e0e7ec;border-radius:12px}
.real-forms>.container{width:100%;max-width:none;margin:0}
.form-switch{display:flex;justify-content:center;gap:10px;margin-bottom:24px}
.switch{border:1px solid #cbd7df;background:#fff;color:#17354d;border-radius:999px;padding:11px 20px;font-weight:800;cursor:pointer}
.switch.active{background:#0a416b;color:#fff;border-color:#0a416b}
.form-panel{display:none;width:100%;max-width:none;margin:0;background:#fff;border:1px solid #dfe7ed;border-radius:12px;box-shadow:0 14px 36px rgba(16,40,61,.07);padding:30px}
.form-panel.active{display:block}
.form-head{display:grid;grid-template-columns:1fr .8fr;gap:25px;align-items:end;margin-bottom:22px}
.form-head span{font-size:12px;font-weight:900;letter-spacing:1.8px;color:#ff5b24}
.form-head h2{margin:7px 0 0;color:#0c2b43;font-size:30px}
.form-head p{color:#647684;line-height:1.55;margin:0}
.sec-form{display:grid;gap:12px}
.sec-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sec-form input,.sec-form select,.sec-form textarea{width:100%;border:1px solid #cad6df;border-radius:10px;padding:13px 14px;font:inherit;background:#fff}
.sec-form textarea{resize:vertical}
.sec-form label{font-size:14px;color:#405463}
.sec-form label input{width:auto;margin-right:8px}
.photo-note{background:#edf6fc;border-left:4px solid #0b5f98;border-radius:7px;padding:12px 14px;color:#405463;font-size:13px;line-height:1.5}
.send{border:0;border-radius:10px;background:linear-gradient(135deg,#ff692d,#ef4019);color:#fff;font-weight:900;padding:15px 18px;font-size:15px;cursor:pointer}

.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(2,15,25,.74);z-index:9999;padding:20px}
.modal.open{display:grid}
.modal-card{position:relative;width:min(650px,100%);background:#fff;border-radius:18px;padding:28px;box-shadow:0 25px 80px rgba(0,0,0,.35)}
.close{position:absolute;right:14px;top:8px;border:0;background:transparent;font-size:34px;color:#667986;cursor:pointer}
.modal-card h2{margin:0 35px 12px 0;color:#0b304d}
.modal-card p{line-height:1.6;color:#5e7180}
.modal-card a{display:inline-flex;margin-top:10px;border-radius:999px;background:#0a5d96;color:#fff;padding:12px 18px;text-decoration:none;font-weight:800}

@media(max-width:800px){
  .form-head{grid-template-columns:1fr}
  .sec-form .two{grid-template-columns:1fr}
  .real-forms{padding:24px 18px 28px}
  .form-panel{padding:22px 16px}
  .hotspot:hover{box-shadow:none}
}
@media(max-width:600px){
  .security-visual,.real-forms{width:calc(100% - 28px)}
  .security-hero-image{border-radius:0 0 10px 10px}
  .real-forms{border-radius:10px}
}