#kk-who-demo{--teal:#57B3BE;--deep:#348D9A;--mint:#DDF3F5;--ink:#173b48;--muted:#5b7880;font-family:"Mikado", "Mikado Regular", "Mikado Web", Arial, sans-serif;color:var(--ink);font-size:15px;isolation:isolate;max-width:1200px;margin:auto;line-height:1.5} #kk-who-demo *{box-sizing:border-box}#kk-who-demo .shell{padding:clamp(16px,3vw,34px);border-radius:30px;background:radial-gradient(ellipse at 80% 0%,#DDF3F5 0%,transparent 42%),linear-gradient(#fbfefd,#F5FBFC)} #kk-who-demo h2{font-size:clamp(25px,3vw,39px);line-height:1.15;color:#1b5f6b;margin:0 0 10px}#kk-who-demo h3{font-size:20px;color:#246f79;margin:0 0 14px}#kk-who-demo p{margin:0 0 15px;color:var(--muted)} #kk-who-demo .intro{margin-bottom:24px}#kk-who-demo .tag{font-size:11px;letter-spacing:.14em;font-weight:800;color:#348D9A;text-transform:uppercase;margin-bottom:9px} #kk-who-demo .layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.6fr);gap:17px}#kk-who-demo .panel{background:rgba(255,255,255,.93);border:1px solid #DBEDF0;border-radius:22px;padding:20px;box-shadow:0 12px 35px rgba(38,109,113,.06)} #kk-who-demo .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}#kk-who-demo label{display:block;font-size:12px;font-weight:700;color:#3a6b74;margin-bottom:5px}#kk-who-demo input,#kk-who-demo select{font:inherit;color:#234954;max-width:100%;width:100%;height:40px;padding:8px 10px;background:white;border:1px solid #C3DEE2;border-radius:10px} #kk-who-demo input:focus,#kk-who-demo select:focus{outline:2px solid #57B3BE;outline-offset:1px}#kk-who-demo .measurement{padding:12px;border:1px solid #D7EBEE;border-radius:15px;margin:12px 0;background:#fbfefd}#kk-who-demo .measure-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:13px;font-weight:700;color:#348D9A} #kk-who-demo .measure-fields{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:9px}#kk-who-demo .measure-fields input{padding:7px 5px;font-size:13px}#kk-who-demo button{cursor:pointer;font:inherit;font-weight:700;border:0;border-radius:12px;padding:11px 15px;transition:filter .15s}#kk-who-demo button:hover{filter:brightness(.95)}#kk-who-demo button:focus-visible{outline:3px solid #246f79;outline-offset:3px} #kk-who-demo .primary{background:linear-gradient(115deg,#57B3BE,#348D9A);color:white}#kk-who-demo .light{background:#E7F6F8;color:#226b74;border:1px solid #B9DFE3}#kk-who-demo .remove{background:transparent;color:#a34a4a;padding:3px 8px}#kk-who-demo .actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px} #kk-who-demo .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}#kk-who-demo .metric{border-radius:14px;background:linear-gradient(130deg,#F0FAFB,#E1F3F5);padding:13px;text-align:center;border:1px solid #D7EDF0}#kk-who-demo .metric span{font-size:12px;color:#4a7b81;display:block}#kk-who-demo .metric strong{display:block;font-size:24px;color:#216b77;margin:4px 0}#kk-who-demo .tabs{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0 8px}#kk-who-demo .tabs button{padding:9px 13px;background:#EAF7F8;color:#347987}#kk-who-demo .tabs button.active{background:#348D9A;color:white} #kk-who-demo .zoom-bar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:11px 0}#kk-who-demo .zoom-bar button{padding:8px 11px;font-size:12px}#kk-who-demo .zoom-hint{font-size:11px;color:#64838a;margin-left:auto}#kk-who-demo .chart-wrap{touch-action:pan-y}#kk-who-demo .chart-wrap svg{cursor:crosshair}#kk-who-demo .zoom-selection{fill:#57B3BE;fill-opacity:.14;stroke:#348D9A;stroke-dasharray:5 4}#kk-who-demo .chart-wrap{position:relative;border:1px solid #D7EBEE;background:white;border-radius:15px;padding:14px;overflow:hidden}#kk-who-demo #kk-chart{width:100%;height:auto;display:block}#kk-who-demo #kk-results th,#kk-who-demo #kk-results td{padding:8px;border-bottom:1px solid #e0eeee;text-align:left;white-space:nowrap}#kk-who-demo #kk-results th{color:#287584;background:#EAF7F9}#kk-who-demo .foot{font-size:12px;color:#65828a;margin-top:12px}#kk-who-demo .notice{border-radius:13px;background:#EFF8F9;padding:13px;font-size:13px;color:#376a72;margin-top:15px;border:1px solid #D5EBEE}#kk-who-demo .error{color:#a43e3e;font-size:13px;margin-top:8px;min-height:10px}#kk-who-demo .status{font-size:13px;margin-top:10px;color:#33767b} @media(max-width:800px){#kk-who-demo .layout{grid-template-columns:1fr}#kk-who-demo .shell{padding:14px}#kk-who-demo .panel{padding:16px}}@media(max-width:450px){#kk-who-demo .measure-fields{grid-template-columns:1fr 1fr}#kk-who-demo .measure-fields .date-col{grid-column:1/-1}#kk-who-demo .metrics{grid-template-columns:1fr 1fr}#kk-who-demo .metric:last-child{grid-column:1/-1}} @media print{body *{visibility:hidden!important}#kk-who-demo,#kk-who-demo *{visibility:visible!important}#kk-who-demo{position:absolute;left:0;top:0;width:100%;max-width:none}#kk-who-demo .layout{display:block}#kk-who-demo .input-panel,#kk-who-demo .actions,#kk-who-demo .tabs{display:none!important}#kk-who-demo .panel{box-shadow:none;break-inside:avoid}} /* Kapcsolódó cikk – százalékgörbék */ #kk-who-demo input,#kk-who-demo select,#kk-who-demo button,#kk-who-demo table,#kk-who-demo svg text{font-family:"Mikado","Mikado Regular","Mikado Web",Arial,sans-serif} /* v0.3: Mikado Bold, mobilon egységes dátummezők és összecsukható mérések */ #kk-who-demo .intro h2{font-family:"Mikado","Mikado Bold","Mikado Web",Arial,sans-serif!important;font-weight:800!important;font-synthesis:weight;letter-spacing:-.025em} #kk-who-demo .fields>*{min-width:0} #kk-who-demo .fields input[type="date"],#kk-who-demo .measure-fields input[type="date"]{min-width:0;max-width:100%;width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none} #kk-who-demo .measurement details{width:100%} #kk-who-demo .measure-summary{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#348D9A;font-weight:800;cursor:pointer;list-style:none;font-size:14px} #kk-who-demo .measure-summary::-webkit-details-marker{display:none} #kk-who-demo .measure-summary .summary-name{min-width:0} #kk-who-demo .measure-summary .summary-meta{font-weight:600;font-size:11px;color:#63858c;white-space:nowrap} #kk-who-demo .measure-summary:after{content:"⌄";color:#348D9A;font-size:22px;line-height:1;transition:transform .2s} #kk-who-demo details[open]>.measure-summary:after{transform:rotate(180deg)} #kk-who-demo .measure-body{padding-top:12px} #kk-who-demo .measure-head{margin:0 0 8px;justify-content:flex-end} #kk-who-demo .who-status-error{background:#fff5ed;border:1px solid #f1d2b9;border-radius:10px;padding:10px;color:#7b4223} #kk-who-demo .who-status-ok{background:#eaf8f8;border:1px solid #c2e3e5;border-radius:10px;padding:10px;color:#215e66} @media(max-width:600px){ #kk-who-demo .fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px} #kk-who-demo .fields input,#kk-who-demo .fields select{width:100%!important;min-width:0!important;height:42px!important;font-size:14px!important;padding:8px 5px!important} #kk-who-demo .measure-fields{grid-template-columns:1fr 1fr} #kk-who-demo .measure-fields .date-col{grid-column:1/-1} #kk-who-demo .measurement{margin:8px 0;padding:11px} } /* v0.6.1 – Mobilos vízszintes túlnyúlás javítása. A belső grid/flex elemek min-content szélessége nem tágíthatja a lapot. */ #kk-who-demo, #kk-who-demo .shell, #kk-who-demo .layout, #kk-who-demo .panel, #kk-who-demo #kk-report, #kk-who-demo .input-panel, #kk-who-demo .fields, #kk-who-demo .measure-fields, #kk-who-demo .measurement, #kk-who-demo .measurement details, #kk-who-demo .measure-body, #kk-who-demo .chart-wrap, #kk-who-demo .layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)} #kk-who-demo input[type="date"]{min-width:0;max-width:100%;box-sizing:border-box} #kk-who-demo .chart-wrap svg{max-width:100%} #kk-who-demo .measure-summary .summary-meta{min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #kk-who-demo .zoom-bar,#kk-who-demo .actions,#kk-who-demo .tabs{min-width:0;max-width:100%} #kk-who-demo .foot,#kk-who-demo .notice,#kk-who-demo .status,#kk-who-demo .error{overflow-wrap:anywhere} @media(max-width:800px){ #kk-who-demo .layout{grid-template-columns:minmax(0,1fr)} } @media(max-width:600px){ #kk-who-demo .shell{width:100%;padding:12px;border-radius:18px} #kk-who-demo .panel{padding:13px;border-radius:17px} #kk-who-demo .fields{grid-template-columns:repeat(2,minmax(0,1fr))!important} #kk-who-demo .measure-fields{grid-template-columns:repeat(2,minmax(0,1fr))} #kk-who-demo .measure-fields .date-col{grid-column:1/-1} #kk-who-demo .metrics{grid-template-columns:repeat(2,minmax(0,1fr))} #kk-who-demo input,#kk-who-demo select{max-width:100%} #kk-who-demo .chart-wrap{padding:7px} #kk-who-demo .zoom-bar{gap:5px} #kk-who-demo .zoom-bar button{padding:8px 9px} } /* Fejlécek és kártyacímek öröklése a témából, mobilon is */ #kk-who-demo .tag,#kk-who-demo .measure-summary{font-family:"KK Mikado","Mikado","Mikado Web",Arial,sans-serif!important;} /* Newspaper Custom Font: a tema altal mar betoltott Mikado ujrahasznositasa. Nincs kulon @font-face es nincs ujabb fontkeres / fontletoltes. */ #kk-who-demo, #kk-who-demo h2, #kk-who-demo h3, #kk-who-demo .intro h2, #kk-who-demo .tag, #kk-who-demo .measure-summary, #kk-who-demo .metric strong, #kk-who-demo input, #kk-who-demo select, #kk-who-demo button, #kk-who-demo label { font-family: "Mikado", "Mikado Regular", Arial, sans-serif !important; } #kk-who-demo .intro h2, #kk-who-demo h3, font-weight: 800 !important; font-synthesis: weight; } /* Mobilon a Newspaper cimsor-stilusai ne irjak felul a plugin tipografiajat. */ @media(max-width:767px){ #kk-who-demo .intro h2, #kk-who-demo h3, font-family: "Mikado", "Mikado Regular", Arial, sans-serif !important; font-weight: 800 !important; } } /* WHO-referenciaszintek közötti jelentős váltás – csak indokolt esetben látható */ #kk-who-demo #kk-crossing-alert[hidden]{display:none!important} #kk-who-demo .kk-crossing-alert{margin:13px 0;padding:13px 16px;border-left:4px solid #B43C32;border-radius:10px;background:#FFF1EF;color:#653F3A;font-size:13px;line-height:1.45;max-width:100%;overflow-wrap:anywhere} #kk-who-demo .kk-crossing-title{font-weight:800;color:#B43C32;font-size:15px;margin-bottom:5px} #kk-who-demo .kk-crossing-title span{display:inline-flex;justify-content:center;align-items:center;width:20px;height:20px;border-radius:50%;color:#fff;background:#B43C32;font:700 15px Arial,sans-serif;margin-right:5px} #kk-who-demo .kk-crossing-sub{color:#806865;font-size:12px;margin-top:5px} /* v0.6.9: PDF-nyomtatás: kompakt, A4, nincs kényszerített táblázat-oldaltörés. */ #kk-who-demo #kk-who-print-report{display:none} @media print { @page { size:A4 portrait; margin:7mm 9mm; } html,body{margin:0!important;padding:0!important;min-height:0!important;background:#fff!important} body *{visibility:hidden!important} #kk-who-demo{ position:absolute!important;left:0!important;top:0!important; display:block!important;width:100%!important;max-width:none!important; margin:0!important;padding:0!important;border:0!important; min-height:0!important;background:#fff!important;transform:none!important; } #kk-who-demo .shell{display:block!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important} #kk-who-demo > .shell > :not(#kk-who-print-report), #kk-who-demo .intro,#kk-who-demo .layout,#kk-who-demo .article-reco{display:none!important} #kk-who-demo #kk-who-print-report{ display:block!important;visibility:visible!important; position:static!important;width:100%!important; margin:0!important;padding:0!important;border:0!important; font-family:"Mikado",Arial,sans-serif;color:#254c55; } #kk-who-demo #kk-who-print-report *{visibility:visible!important} #kk-who-demo #kk-who-print-report h2{font-size:17px!important;line-height:1.15!important;margin:0 0 2mm!important} #kk-who-demo #kk-who-print-report > p:first-of-type{font-size:10px!important;line-height:1.2!important;margin:0 0 2mm!important} #kk-who-demo #kk-who-print-report h3{font-size:12px!important;line-height:1.15!important;margin:0 0 1mm!important} #kk-who-demo .kk-who-print-chart{ display:block!important;break-inside:avoid!important;page-break-inside:avoid!important; margin:0 0 2mm!important;padding:0!important; } #kk-who-demo .kk-who-print-chart svg{ display:block!important;width:117mm!important;max-width:100%!important; height:auto!important;max-height:none!important;margin:0 auto!important; } #kk-who-demo .kk-who-print-alert{color:#ab473c!important;font-size:9px!important;line-height:1.25!important;margin:1mm 0!important} #kk-who-demo .kk-who-print-table{ break-before:auto!important;page-break-before:auto!important; margin:1mm 0 0!important;padding:0!important; } #kk-who-demo .kk-who-print-table table{width:100%!important;border-collapse:collapse!important;table-layout:fixed!important;font-size:7.5px!important;line-height:1.2!important;margin:0!important} #kk-who-demo .kk-who-print-table th,#kk-who-demo .kk-who-print-table td{border:1px solid #c9dadd!important;padding:2px 2px!important;overflow-wrap:anywhere} #kk-who-demo .kk-who-print-table tr{break-inside:avoid!important;page-break-inside:avoid!important} #kk-who-demo .kk-who-print-foot{font-size:8px!important;margin:2mm 0 0!important;line-height:1.2!important} } /* v0.7.1: Measuring date needs more room without compressing number fields. */ #kk-who-demo .measure-fields{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr) minmax(0,1fr)!important} #kk-who-demo .measure-fields .date-col{grid-column:auto!important} #kk-who-demo .measure-fields input[type="date"]{width:100%!important;padding-left:9px!important;padding-right:4px!important;font-size:14px!important} @media(max-width:650px){#kk-who-demo .measure-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important}#kk-who-demo .measure-fields .date-col{grid-column:1/-1!important}} /* v0.7.2 – Interaktív mérési pontok és visszafogott fókuszanimáció */ #kk-who-demo .kk-point-hit{cursor:pointer;outline:none} #kk-who-demo .kk-point-hit .kk-point-dot{transform-box:fill-box;transform-origin:center;transition:r .18s ease,fill .18s ease} #kk-who-demo .kk-point-hit:hover .kk-point-dot, #kk-who-demo .kk-point-hit:focus-visible .kk-point-dot{r:9;fill:#267C87} #kk-who-demo .kk-point-hit:focus-visible .kk-point-target{stroke:#267C87;stroke-width:2;stroke-dasharray:3 3} #kk-who-demo .kk-point-active .kk-point-dot{animation:kk-who-point-pulse .75s ease-out 1} #kk-who-demo .kk-measure-flash{animation:kk-who-measure-flash 1.1s ease-out 1} @keyframes kk-who-point-pulse{0%{stroke-width:2}35%{stroke:#50ADB6;stroke-width:10}100%{stroke-width:2}} @keyframes kk-who-measure-flash{0%{background:#E8F6F5}55%{background:#E8F6F5}100%{background:transparent}} @media(prefers-reduced-motion:reduce){#kk-who-demo .kk-point-active .kk-point-dot,#kk-who-demo .kk-measure-flash{animation:none}#kk-who-demo .kk-point-hit .kk-point-dot{transition:none}} /* v0.7.3 – Mentési hivatkozás */ #kk-who-demo .kk-save-link{margin:22px 0 8px;padding:20px;border:1px solid #D5EAE9;border-radius:18px;background:#F8F8F5} #kk-who-demo .kk-save-link h4{margin:0 0 8px;color:#267C87;font-size:19px;font-weight:800} #kk-who-demo .kk-save-link p{margin:0 0 14px;color:#4d6a70;font-size:14px;line-height:1.6} #kk-who-demo .kk-save-buttons{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 13px} #kk-who-demo .kk-save-buttons button{max-width:100%;white-space:normal} #kk-who-demo .kk-save-buttons [hidden]{display:none!important} #kk-who-demo .kk-save-link label{display:block;margin-bottom:6px;font-size:13px;font-weight:700;color:#267C87} #kk-who-demo .kk-save-link textarea{width:100%;display:block;box-sizing:border-box;min-height:68px;background:#fff;border:1px solid #c5dbda;border-radius:10px;resize:vertical;padding:10px;font-size:13px;line-height:1.5;color:#355e68;overflow-wrap:anywhere} #kk-who-demo .kk-link-status{min-height:20px;margin:9px 0;color:#267C87;font-size:13px;font-weight:700} #kk-who-demo .kk-save-link small{display:block;color:#6a7c7e;font-size:12px;line-height:1.55} @media(max-width:550px){#kk-who-demo .kk-save-link{padding:15px}#kk-who-demo .kk-save-buttons button{width:100%}}