.home-motion .qr-demo.pic:hover img{transform:none}
.qr-stage{position:relative;isolation:isolate;overflow:visible}
.qr-stage>img{transition:none;filter:none}
.qr-point{position:absolute;left:var(--qx);top:var(--qy);width:5%;height:7%;min-width:20px;min-height:20px;transform:translate(-50%,-50%);border:1px solid #2cddc755;border-radius:4px;background:transparent;padding:0;cursor:default;z-index:1;overflow:visible}
.qr-point.barcode-point{width:6%;height:3.7%;min-width:24px;min-height:10px;border-color:#8abdff66}
.code-lift{position:absolute;inset:-2px;display:block;padding:2px;border:1px solid #c8e0df;border-radius:3px;background:white;opacity:0;transform:scale(1);transform-origin:var(--lift-origin,50% 50%);transition:transform .38s cubic-bezier(.18,.85,.25,1.12),opacity .15s,box-shadow .38s;pointer-events:none}
.qr-demo.pic .code-lift img{display:block;width:100%;height:100%;object-fit:contain;transform:none;filter:none}
.qr-point.is-lifted{z-index:8;border-color:transparent}
.qr-point.is-lifted .code-lift{opacity:1;transform:translateY(-7px) scale(4.4) rotate(-2deg);box-shadow:0 6px 8px #0009,0 1px 2px #0006}
.qr-point.barcode-point.is-lifted .code-lift{transform:translateY(-6px) scale(4) rotate(-2deg)}
.qr-point:focus-visible{outline:2px solid #61e9dc;outline-offset:3px}
.qr-demo .qr-info{position:relative;inset:auto;min-height:94px;padding:14px 18px;border-top:1px solid #284451;text-align:left;background:#081c29;color:#e0f0f5;pointer-events:none}
.qr-info small{display:block;font-size:12px;line-height:1.5;color:#75dfd4}.qr-info strong{display:block;font-size:15px;margin:3px 0}.qr-info code{display:block;font:12px/1.5 ui-monospace,monospace;color:#cfe3ee}
.code-selector{display:none}.qr-help{display:none;margin:0;padding:0 16px 16px;font-size:12px;line-height:1.6;color:#bed2dc;text-align:left}
@media(hover:none){.qr-demo[data-mode=qr] .barcode-point,.qr-demo[data-mode=ean] .qr-point[data-type=qr]{display:none}.qr-point,.qr-point.barcode-point{min-width:28px;min-height:28px}.qr-point.is-lifted .code-lift{transform:translateY(-4px) scale(2.8) rotate(-2deg)}.qr-point.barcode-point.is-lifted .code-lift{transform:translateY(-4px) scale(3) rotate(-2deg)}.code-selector{display:flex;gap:10px;padding:12px 16px}.code-selector button{min-height:44px;padding:8px 16px;border:1px solid #486472;border-radius:8px;background:#0b2535;color:#d7e8ef;font:inherit;cursor:pointer}.code-selector button[aria-pressed=true]{border-color:#54e0cf;color:#74ebdc}.qr-help{display:block}}
@media(prefers-reduced-motion:reduce){.code-lift{transition:none}}
@media(hover:none){.qr-point.barcode-point .code-lift{inset:7px -5px}}

/* Reserve every data row before hover so the centered card and its hit areas stay still. */
.qr-info small{min-height:36px}
.qr-info strong{min-height:24px;line-height:24px}
.qr-info code{min-height:18px}

/* 05.10 gece: görsel <picture> içinde (WebP boyları); satır içi boşluk kalmasın, noktalar yerinde dursun. */
.qr-stage>picture{display:block}
.qr-stage>picture>img{transition:none;filter:none}
/* Dokunmatik ekranda her kod noktası en az 44 × 44 px dokunma alanı; görünen çerçeve kodun boyunda kalır. */
@media(hover:none){
 .qr-point,.qr-point.barcode-point{min-width:44px;min-height:44px;border-color:transparent}
 .qr-point::before{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);border:1px solid #2cddc788;border-radius:4px;pointer-events:none}
 .qr-point.barcode-point::before{width:32px;height:14px;border-color:#8abdff88}
 .qr-point.is-lifted::before{opacity:0}
 .qr-point .code-lift{inset:auto;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px}
 .qr-point.barcode-point .code-lift{width:34px;height:16px;margin:-8px 0 0 -17px}
}