/* Instagram hologram (1.19) */
.bk-holo-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center}
.bk-holo-copy h2{font:500 clamp(40px,5vw,74px)/1 Manrope,sans-serif;letter-spacing:-.065em;margin:14px 0 22px}
.bk-holo-copy p{max-width:360px;color:#a6a39e;line-height:1.7;margin:0 0 30px}
.bk-holo{--rx:0deg;--ry:0deg;--holo:150,232,255;position:relative;width:min(100%,470px);justify-self:center;aspect-ratio:1086/1448;overflow:hidden;background:#0d0b0a;perspective:900px;isolation:isolate;container-type:inline-size}
.bk-holo-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;transform:scale(1.04);transition:transform 2.4s cubic-bezier(.2,.7,.2,1),filter 2.4s ease;filter:brightness(.8) saturate(.95)}
.bk-holo.is-on .bk-holo-photo{transform:scale(1);filter:brightness(.92) saturate(1)}
.bk-holo:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at var(--palm-x) var(--palm-y),rgba(var(--holo),.10),transparent 38%),linear-gradient(180deg,transparent 70%,rgba(8,7,6,.5))}
/* light rising from the palm to the card */
.bk-holo-beam{position:absolute;z-index:2;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transform-origin:50% 100%;background:radial-gradient(50% 100% at 50% 100%,rgba(var(--holo),.46),rgba(var(--holo),.16) 45%,rgba(var(--holo),0) 78%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mix-blend-mode:screen;filter:blur(4px)}
.bk-holo.is-on .bk-holo-beam{animation:bk-beam-in .9s .25s ease-out forwards,bk-beam-flicker 5s 1.2s infinite}
.bk-holo-beam i{position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;background:rgba(var(--holo),.9);box-shadow:0 0 6px rgba(var(--holo),.9);opacity:0;animation:bk-mote 3.6s linear infinite}
.bk-holo-beam i:nth-child(1){left:44%;animation-delay:.2s}.bk-holo-beam i:nth-child(2){left:52%;animation-delay:1.1s}.bk-holo-beam i:nth-child(3){left:48%;animation-delay:2s}.bk-holo-beam i:nth-child(4){left:56%;animation-delay:2.7s}.bk-holo-beam i:nth-child(5){left:41%;animation-delay:3.2s}
.bk-holo-glow{position:absolute;z-index:2;left:var(--palm-x);top:var(--palm-y);width:34%;aspect-ratio:3/1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(var(--holo),.38),transparent 70%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.bk-holo.is-on .bk-holo-glow{animation:bk-glow-in 1s .2s ease-out forwards,bk-glow-pulse 3.2s 1.2s ease-in-out infinite}
/* the card */
.bk-holo-card{position:absolute;z-index:3;left:var(--card-x);top:var(--card-y-m,var(--card-y));width:var(--card-w,var(--card-w-base,66%));transform:translate(-50%,-100%) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;color:#eef9ff;text-decoration:none;opacity:0;transition:transform .25s ease-out}
.bk-holo.is-on .bk-holo-card{animation:bk-card-in 1.1s .45s cubic-bezier(.2,.8,.2,1) forwards}
.bk-holo-inner{position:relative;display:block;padding:1.25em 1.45em 1.3em;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(var(--holo),.06));border:1px solid rgba(var(--holo),.55);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 26px rgba(var(--holo),.28),0 0 2px rgba(var(--holo),.9) inset,0 18px 40px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(7px) saturate(140%);backdrop-filter:blur(7px) saturate(140%);font:400 clamp(8.5px,2.15cqw,14px)/1.45 'DM Sans',sans-serif;text-shadow:0 0 8px rgba(var(--holo),.35)}
.bk-holo.is-on .bk-holo-inner{animation:bk-float 6s 1.6s ease-in-out infinite}
/* scan lines and a sweep of light */
.bk-holo-inner:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(var(--holo),.07) 0 1px,transparent 1px 4px);animation:bk-scan 8s linear infinite;opacity:.6}
.bk-holo-inner:after{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);animation:bk-sweep 7s 2.2s ease-in-out infinite}
.bk-holo-top{display:flex;align-items:center;gap:12px;margin-bottom:1em}
.bk-holo-top strong{flex:1;font-weight:600;font-size:1.12em;letter-spacing:.01em}
.bk-holo-ico{width:1.35em;height:1.35em;flex:none;fill:currentColor;opacity:.9}
.bk-holo-ico path{fill:none}
.bk-holo-head{display:flex;align-items:center;gap:1.6em;margin-bottom:.8em}
.bk-holo-avatar{flex:none;width:5.6em;aspect-ratio:1;border-radius:50%;padding:2px;background:conic-gradient(from 210deg,#f6c26b,#e2765a,#c74f8f,#f6c26b);box-shadow:0 0 14px rgba(var(--holo),.35)}
.bk-holo-avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid rgba(10,10,12,.7)}
.bk-holo-stats{flex:1;display:flex;justify-content:space-around;text-align:center}
.bk-holo-stats b{display:block;font-weight:600;font-size:1.35em}
.bk-holo-stats small{font-size:.92em;opacity:.85}
.bk-holo-name{display:block;font-weight:600;font-size:1.1em}
.bk-holo-cat{display:block;opacity:.6;margin-bottom:6px}
.bk-holo-bio{display:block;margin-bottom:6px}
.bk-holo-link{display:inline-flex;align-items:center;gap:6px;color:#d6f4ff;opacity:.92}
.bk-holo-follow{display:inline-flex;align-items:center;justify-content:center;padding:.55em 1.4em;border-radius:8px;background:rgba(var(--holo),.18);border:1px solid rgba(var(--holo),.5);font-weight:600;letter-spacing:.02em;transition:background .3s}
.bk-holo-follow-wide{display:flex;margin-top:12px}
.bk-holo-card:hover .bk-holo-follow,.bk-holo-card:focus-visible .bk-holo-follow{background:rgba(var(--holo),.32)}
.bk-holo-card:focus-visible{outline:none}.bk-holo-card:focus-visible .bk-holo-inner{box-shadow:0 0 0 2px #e3c99c,0 0 26px rgba(var(--holo),.4)}
@keyframes bk-card-in{0%{opacity:0;transform:translate(-50%,-80%) rotateX(var(--rx)) rotateY(var(--ry)) scale(.4,.05)}35%{opacity:.9;transform:translate(-50%,-92%) rotateX(var(--rx)) rotateY(var(--ry)) scale(.9,.3)}42%{opacity:.3}50%{opacity:1}56%{opacity:.55}62%{opacity:1;transform:translate(-50%,-100%) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.02,1)}100%{opacity:1;transform:translate(-50%,-100%) rotateX(var(--rx)) rotateY(var(--ry)) scale(1)}}
@keyframes bk-beam-in{from{opacity:0;transform:scaleY(.1)}to{opacity:1;transform:scaleY(1)}}
@keyframes bk-beam-flicker{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.55}49%{opacity:1}72%{opacity:.85}}
@keyframes bk-glow-in{to{opacity:1}}
@keyframes bk-glow-pulse{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes bk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes bk-scan{to{background-position:0 64px}}
@keyframes bk-sweep{0%{left:-60%}35%,100%{left:130%}}
@keyframes bk-mote{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-260px);opacity:0}}
@media(max-width:900px){
 .bk-holo-layout{grid-template-columns:1fr;gap:32px}
 .bk-holo{justify-self:stretch;width:100%}
}
@media(max-width:600px){
 /* Small screens: a compact card that rests just above the fingers, so the hand stays visible. */
 .bk-holo{--card-w:min(90%,calc(var(--card-w-base,66%) * 1.22));--card-y-m:calc(var(--card-y) - 3%)}
 .bk-holo-inner{font-size:clamp(9px,2.6cqw,13px);padding:1em 1.2em 1.05em;-webkit-backdrop-filter:blur(2.5px) saturate(125%);backdrop-filter:blur(2.5px) saturate(125%);background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 45%,rgba(var(--holo),.05))}
 .bk-holo-bio{display:none}
 .bk-holo-top{margin-bottom:.7em}
 .bk-holo-head{margin-bottom:.55em}
 .bk-holo-avatar{width:4.6em}
}
@media(prefers-reduced-motion:reduce){
 .bk-holo *,.bk-holo *:before,.bk-holo *:after{animation:none!important;transition:none!important}
 .bk-holo-card,.bk-holo-beam,.bk-holo-glow{opacity:1}
}

/* ---------- beam · Instagram card hologram rising from a projector disc ----------
   Every colour, size and position is a CSS variable set from Özelleştir > Instagram hologramı.
   holo.js shapes the light cone around the card, so the card always stays inside the beam. */
.bk-beam{--holo:90,190,255;--hb-core:255,255,255;--hb-text:#e6f6ff;--hb-bg:16,52,96;--hb-card-a:.2;--hb-glow:1;--hb-cone-a:1;--hb-bg-a:1;--hb-lines-a:1;
 --hb-w:500px;--hb-h:125;--hb-card-w:42%;--hb-card-h:40%;--hb-card-x:50%;--hb-card-y:9%;--hb-text-s:1;--hb-disc-w:80%;--hb-disc-x:50%;--hb-disc-y:82%;--hb-tilt:74deg;--hb-pad:4;
 --hb-speed:1;--hb-gx:1;--hb-float:7px;
 display:block;aspect-ratio:100/var(--hb-h);width:min(100%,var(--hb-w));text-decoration:none;color:var(--hb-text);overflow:visible;
 background:radial-gradient(50% 46% at var(--hb-disc-x) 52%,rgba(var(--hb-bg),calc(.45 * var(--hb-bg-a))),rgba(4,12,22,calc(.3 * var(--hb-bg-a))) 60%,transparent 72%)}
.bk-beam:after{display:none}
.bk-beam-bg{display:none}
/* light cone (holo.js sets its box and shape; this is the no-script fallback) */
.bk-beam-cone{position:absolute;left:2%;right:2%;top:3%;bottom:calc(100% - var(--hb-disc-y));transform:scaleY(.04);transform-origin:50% 100%;opacity:0;pointer-events:none;
 background:linear-gradient(0deg,rgba(var(--hb-cone,var(--holo)),calc(.55 * var(--hb-cone-a))),rgba(var(--hb-cone,var(--holo)),calc(.16 * var(--hb-cone-a))) 55%,rgba(var(--hb-cone,var(--holo)),calc(.03 * var(--hb-cone-a))));
 clip-path:polygon(0 0,100% 0,56% 100%,44% 100%);filter:blur(7px);mix-blend-mode:screen}
.bk-beam.is-on .bk-beam-cone{animation:bk-cone-in calc(.8s * var(--hb-speed)) .2s ease-out forwards}
.bk-beam.fx-flicker.is-on .bk-beam-cone{animation:bk-cone-in calc(.8s * var(--hb-speed)) .2s ease-out forwards,bk-beam-flicker calc(5s * var(--hb-speed)) 1.2s infinite}
/* the card */
.bk-beam-card{position:absolute;left:var(--hb-card-x);top:var(--hb-card-y);width:var(--hb-card-w);height:var(--hb-card-h);transform:translateX(-50%) rotateX(var(--rx)) rotateY(var(--ry));opacity:0;container-type:size;transition:transform .3s ease-out}
.bk-beam.is-on .bk-beam-card{animation:bk-fig-in calc(1.5s * var(--hb-speed)) .7s cubic-bezier(.2,.8,.2,1) forwards}
.bk-beam.in-flicker.is-on .bk-beam-card{animation:bk-in-flicker calc(1.2s * var(--hb-speed)) .6s linear forwards}
.bk-beam.in-zoom.is-on .bk-beam-card{animation:bk-in-zoom calc(1.1s * var(--hb-speed)) .6s cubic-bezier(.2,.8,.2,1) forwards}
.bk-beam.in-drop.is-on .bk-beam-card{animation:bk-in-drop calc(1.1s * var(--hb-speed)) .6s cubic-bezier(.2,.8,.2,1) forwards}
.bk-beam.in-fade.is-on .bk-beam-card{animation:bk-in-fade calc(1.2s * var(--hb-speed)) .6s ease-out forwards}
.bk-beam.in-none .bk-beam-card{animation:none;opacity:1}
.bk-beam-fl{position:absolute;inset:0}
.bk-beam.fx-float.is-on .bk-beam-fl{animation:bk-hfloat calc(6s * var(--hb-speed)) 2s ease-in-out infinite}
.bk-beam-glitch{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.6cqh;padding:5cqh 6cqw;text-align:center;border-radius:6cqw;
 background:linear-gradient(180deg,rgba(var(--holo),var(--hb-card-a)),rgba(var(--holo),calc(var(--hb-card-a) * .35)));border:1px solid rgba(var(--holo),.6);
 box-shadow:0 0 calc(22px * var(--hb-glow)) rgba(var(--holo),calc(.35 * var(--hb-glow))),0 0 2px rgba(var(--holo),.9) inset;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
 font:400 calc(min(8.6cqw,5.6cqh) * var(--hb-text-s))/1.25 'DM Sans',sans-serif;text-shadow:0 0 8px rgba(var(--holo),calc(.75 * var(--hb-glow)));overflow:hidden}
.bk-beam-glitch:before{content:"";position:absolute;inset:0;pointer-events:none;display:none;background:repeating-linear-gradient(180deg,rgba(var(--holo),calc(.12 * var(--hb-lines-a))) 0 1px,transparent 1px 3px);animation:bk-scan calc(8s * var(--hb-speed)) linear infinite}
.bk-beam.fx-lines .bk-beam-glitch:before{display:block}
.bk-beam.fx-glitch.is-on .bk-beam-glitch{animation:bk-glitch calc(6s * var(--hb-speed)) 2.6s steps(1) infinite}
.bk-beam.fx-rgb .bk-beam-glitch{text-shadow:calc(-1.5px * var(--hb-gx)) 0 rgba(255,40,90,.6),calc(1.5px * var(--hb-gx)) 0 rgba(0,240,255,.6),0 0 8px rgba(var(--holo),calc(.75 * var(--hb-glow)))}
.bk-beam-top{display:flex;align-items:center;gap:.45em;font-size:.85em;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.bk-beam .bk-holo-ico{width:1.2em;height:1.2em;fill:currentColor}
/* profile photo: real colours, Instagram's gradient ring */
.bk-beam .bk-holo-avatar{width:min(34cqw,27cqh);padding:3px;background:linear-gradient(225deg,#f72e86 0%,#fd5c63 45%,#fda336 100%);box-shadow:0 0 calc(14px * var(--hb-glow)) rgba(247,46,134,calc(.4 * var(--hb-glow)))}
.bk-beam .bk-holo-avatar img{filter:none;border:3px solid #0b0b0c}
.bk-beam-handle{font-weight:600;font-size:1.12em}
.bk-beam-name{font-size:.95em;margin-top:-1.4cqh}
.bk-beam-cat{font-size:.82em;opacity:.65;margin-top:-1.8cqh}
.bk-beam-bio{font-size:.8em;opacity:.85;line-height:1.35}
.bk-beam-stats{display:flex;gap:1.1em}
.bk-beam-stats b{display:block;font-weight:600}.bk-beam-stats small{font-size:.78em;opacity:.75}
.bk-beam .bk-holo-follow{padding:.45em 1.3em;font-size:.92em;color:inherit;background:rgba(var(--hb-btn,var(--holo)),.2);border-color:rgba(var(--hb-btn,var(--holo)),.6)}
.bk-beam:hover .bk-holo-follow,.bk-beam:focus-visible .bk-holo-follow{background:rgba(var(--hb-btn,var(--holo)),.4)}
.bk-beam.no-top .bk-beam-top,.bk-beam.no-avatar .bk-holo-avatar,.bk-beam.no-name .bk-beam-name,.bk-beam.no-cat .bk-beam-cat,.bk-beam.no-bio .bk-beam-bio,.bk-beam.no-stats .bk-beam-stats,.bk-beam.no-btn .bk-holo-follow{display:none}
.bk-beam-band{position:absolute;left:0;right:0;top:0;height:16%;pointer-events:none;display:none;background:linear-gradient(180deg,transparent,rgba(var(--holo),.28),transparent);animation:bk-band calc(4.5s * var(--hb-speed)) linear infinite}
.bk-beam.fx-band .bk-beam-band{display:block}
/* projector disc */
.bk-beam-floor{position:absolute;left:var(--hb-disc-x);top:var(--hb-disc-y);width:var(--hb-disc-w);aspect-ratio:1;transform:translate(-50%,-50%) rotateX(var(--hb-tilt));opacity:0;pointer-events:none}
.bk-beam.is-on .bk-beam-floor{animation:bk-beam-in 1s .1s ease-out forwards}
.bk-beam-floor svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:rgb(var(--hb-disc,var(--holo)));filter:drop-shadow(0 0 calc(4px * var(--hb-glow)) rgba(var(--hb-disc,var(--holo)),.8))}
.bk-beam-floor .r0{stroke-opacity:.25;stroke-width:1}
.bk-beam-floor .r1{stroke-width:7;stroke-opacity:.55;stroke-dasharray:60 18 14 18}
.bk-beam-floor .r2{stroke-width:2;stroke-opacity:.5;stroke-dasharray:4 8}
.bk-beam-floor .r3{stroke-width:12;stroke-opacity:.45;stroke-dasharray:90 30 20 30}
.bk-beam-floor .r4{stroke-width:1.5;stroke-opacity:.7}
.bk-beam-floor .r5{stroke-width:9;stroke-opacity:.6;stroke-dasharray:30 14}
.bk-beam-floor .r6{fill:rgba(var(--hb-disc,var(--holo)),.25);stroke-opacity:.9}
.bk-beam-floor .spin{transform-box:fill-box;transform-origin:center}
.bk-beam.fx-spin .bk-beam-floor .spin{animation:bk-spin calc(24s * var(--hb-speed)) linear infinite}
.bk-beam.fx-spin .bk-beam-floor .b{animation-duration:calc(40s * var(--hb-speed));animation-direction:reverse}.bk-beam.fx-spin .bk-beam-floor .c{animation-duration:calc(18s * var(--hb-speed))}.bk-beam.fx-spin .bk-beam-floor .d{animation-duration:calc(12s * var(--hb-speed));animation-direction:reverse}
.bk-beam-core{position:absolute;left:var(--hb-disc-x);top:var(--hb-disc-y);width:calc(var(--hb-disc-w) * .2);aspect-ratio:2.4;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
 background:radial-gradient(closest-side,rgb(var(--hb-core)),rgba(var(--hb-cone,var(--holo)),.9) 35%,rgba(var(--hb-cone,var(--holo)),0));filter:blur(2px);mix-blend-mode:screen;opacity:0}
.bk-beam.is-on .bk-beam-core{animation:bk-glow-in .6s .15s forwards}
.bk-beam.fx-pulse.is-on .bk-beam-core{animation:bk-glow-in .6s .15s forwards,bk-glow-pulse calc(2.6s * var(--hb-speed)) 1s ease-in-out infinite}
.bk-beam-motes{position:absolute;left:calc(var(--hb-disc-x) - 10%);width:20%;bottom:calc(100% - var(--hb-disc-y));height:40%;pointer-events:none;display:none}
.bk-beam.fx-motes .bk-beam-motes{display:block}
.bk-beam-motes i{position:absolute;bottom:0;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(var(--hb-cone,var(--holo)),1);opacity:0;animation:bk-beam-mote calc(3.4s * var(--hb-speed)) linear infinite}
.bk-beam-motes i:nth-child(1){left:10%}.bk-beam-motes i:nth-child(2){left:35%;animation-delay:.6s}.bk-beam-motes i:nth-child(3){left:60%;animation-delay:1.3s}.bk-beam-motes i:nth-child(4){left:85%;animation-delay:1.9s}.bk-beam-motes i:nth-child(5){left:48%;animation-delay:2.5s}.bk-beam-motes i:nth-child(6){left:22%;animation-delay:3s}
.bk-beam:focus-visible{outline:2px solid #e3c99c;outline-offset:4px}
@keyframes bk-cone-in{to{opacity:1;transform:scaleY(1)}}
@keyframes bk-fig-in{0%{opacity:0;clip-path:inset(100% -30% -30% -30%)}40%{opacity:.9}48%{opacity:.35}55%{opacity:1}100%{opacity:1;clip-path:inset(-30% -30% -30% -30%)}}
@keyframes bk-in-flicker{0%{opacity:0}10%{opacity:.8}14%{opacity:.1}22%{opacity:.9}26%{opacity:.2}40%{opacity:1}44%{opacity:.4}52%,100%{opacity:1}}
@keyframes bk-in-zoom{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes bk-in-drop{from{opacity:0;translate:0 -40%}to{opacity:1;translate:0 0}}
@keyframes bk-in-fade{to{opacity:1}}
@keyframes bk-hfloat{0%,100%{translate:0 0}50%{translate:0 calc(-1 * var(--hb-float))}}
@keyframes bk-glitch{0%,100%{transform:none;opacity:1}61%{transform:translateX(calc(2% * var(--hb-gx))) skewX(calc(-3deg * var(--hb-gx)));opacity:.7}62%{transform:translateX(calc(-1.5% * var(--hb-gx)))}63%{transform:none}88%{opacity:.55}89%{opacity:1}}
@keyframes bk-band{from{top:-16%}to{top:100%}}
@keyframes bk-spin{to{transform:rotate(360deg)}}
@keyframes bk-beam-mote{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-1000%);opacity:0}}
@keyframes bk-beam-in{to{opacity:1}}
@media(max-width:900px){.bk-beam{justify-self:center}}
@media(prefers-reduced-motion:reduce){.bk-beam-cone,.bk-beam-card,.bk-beam-floor,.bk-beam-core{opacity:1}.bk-beam-cone{transform:none}.bk-beam-band,.bk-beam-motes{display:none!important}}
