/* iPhone 17 Pro-kader voor video's, posts en stories (Özgür 2026-10-07).
   Gebruik:
   <div class="ip17 [ip-blauw|ip-zilver] [ip-liggend]" data-gebaar="veeg|tik2|tikr|scroll">
     <div class="ip-b"><div class="ip-s [ip-licht]"> …inhoud… </div></div>
   </div>
   Alle maten in cqw (100cqw = breedte van het toestel), zodat het kader op elke grootte klopt.
   toestel.js zet het eiland, de statusbalk en de vinger erin. */
.ip17{--k1:#f7b88c;--k2:#dd6c2f;--k3:#b4501d;--knop:#c9632b;
  position:relative;container-type:inline-size;width:min(100%,260px);margin-inline:auto;flex:none}
.ip17.ip-blauw{--k1:#7f93b3;--k2:#2f4366;--k3:#1c2a44;--knop:#3a4f75}
.ip17.ip-zilver{--k1:#f2f2f0;--k2:#bdbdb9;--k3:#8f8f8b;--knop:#b5b5b1}
.ip-b{position:relative;aspect-ratio:402/874;padding:2.3cqw;border-radius:15.5cqw;border:1.25cqw solid transparent;
  background:linear-gradient(#030303,#030303) padding-box,linear-gradient(145deg,var(--k1) 0%,var(--k2) 26%,var(--k1) 50%,var(--k3) 76%,var(--k2) 100%) border-box;
  box-shadow:0 0 0 .3cqw rgba(255,255,255,.14),0 2cqw 0 -1cqw rgba(0,0,0,.4),0 14cqw 26cqw -9cqw rgba(0,0,0,.95)}
/* zijknoppen: links Action + volume, rechts zijknop + Camera Control */
.ip-b::before,.ip-b::after{content:"";position:absolute;width:.9cqw;border-radius:.4cqw;background:linear-gradient(90deg,var(--k3),var(--k1),var(--knop))}
.ip-b::before{left:-2.15cqw;top:19%;height:6cqw;box-shadow:0 11cqw 0 0 var(--knop),0 23cqw 0 0 var(--knop)}
.ip-b::before{clip-path:none}
.ip-b::after{right:-2.15cqw;top:28%;height:17cqw;box-shadow:0 44cqw 0 -2.2cqw var(--knop)}
.ip-s{position:relative;height:100%;border-radius:13.2cqw;overflow:hidden;background:#000;color:#fff;isolation:isolate;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif}
.ip-s.ip-licht{background:#fff;color:#111}
/* glans over het glas */
.ip-s::before{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%);box-shadow:inset 0 0 0 .35cqw rgba(0,0,0,.6)}
.ip-eiland{position:absolute;z-index:22;top:2.6cqw;left:50%;transform:translateX(-50%);width:31cqw;height:9cqw;border-radius:5cqw;background:#000}
.ip-eiland::after{content:"";position:absolute;right:3.2cqw;top:50%;width:3.1cqw;height:3.1cqw;margin-top:-1.55cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3a55,#05070c 70%)}
.ip-stat{position:absolute;z-index:21;top:3.4cqw;left:0;right:0;height:7cqw;display:flex;justify-content:space-between;align-items:center;padding:0 7.5cqw 0 10.5cqw;
  font:600 4.3cqw/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;letter-spacing:-.01em;color:#fff;pointer-events:none;text-shadow:0 0 3cqw rgba(0,0,0,.35)}
.ip-stat svg{filter:drop-shadow(0 0 1.5cqw rgba(0,0,0,.35))}
.ip-licht .ip-stat{color:#111;text-shadow:none;top:0;height:12.5cqw;padding-top:2.2cqw;background:#fff}
.ip-licht .ip-stat svg{filter:none}
.ip-stat svg{height:3.6cqw;width:auto;fill:currentColor;margin-left:1.3cqw}
.ip-stat span:last-child{display:flex;align-items:center}
.ip-thuis{position:absolute;z-index:21;bottom:2cqw;left:50%;transform:translateX(-50%);width:36cqw;height:1.4cqw;border-radius:1cqw;background:rgba(255,255,255,.85);pointer-events:none}
.ip-licht .ip-thuis{background:rgba(0,0,0,.8)}

/* liggend toestel (16:9-video) */
.ip17.ip-liggend{width:min(100%,640px)}
.ip-liggend .ip-b{aspect-ratio:874/402;padding:1.06cqw;border-radius:7.1cqw;border-width:.58cqw;
  box-shadow:0 0 0 .14cqw rgba(255,255,255,.14),0 6cqw 12cqw -4cqw rgba(0,0,0,.95)}
.ip-liggend .ip-b::before{left:19%;top:-1cqw;width:2.8cqw;height:.42cqw;box-shadow:5cqw 0 0 0 var(--knop),10.6cqw 0 0 0 var(--knop)}
.ip-liggend .ip-b::after{right:28%;left:auto;top:auto;bottom:-1cqw;width:7.8cqw;height:.42cqw;box-shadow:-20cqw 0 0 -.15cqw var(--knop)}
.ip-liggend .ip-s{border-radius:6.1cqw}
.ip-liggend .ip-eiland{top:50%;left:1.2cqw;transform:translateY(-50%);width:4.1cqw;height:14.3cqw;border-radius:2.3cqw}
.ip-liggend .ip-eiland::after{right:auto;top:auto;bottom:1.5cqw;left:50%;margin:0 0 0 -.72cqw;width:1.44cqw;height:1.44cqw}
.ip-liggend .ip-stat,.ip-liggend .ip-thuis{display:none}

/* ---------- vinger: iOS 'toon aanrakingen' ---------- */
.ip-vinger{position:absolute;z-index:23;left:0;top:0;width:15cqw;height:15cqw;margin:-7.5cqw 0 0 -7.5cqw;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.55) 0 38%,rgba(255,255,255,.28) 60%,rgba(255,255,255,0) 72%);
  box-shadow:0 0 0 .5cqw rgba(255,255,255,.55),0 1cqw 4cqw rgba(0,0,0,.35)}
.ip-licht .ip-vinger{background:radial-gradient(circle,rgba(30,30,30,.32) 0 38%,rgba(30,30,30,.16) 60%,rgba(30,30,30,0) 72%);box-shadow:0 0 0 .5cqw rgba(30,30,30,.32)}
.ip-hart{position:absolute;z-index:22;left:50%;top:46%;width:30cqw;height:30cqw;margin:-15cqw 0 0 -15cqw;pointer-events:none;opacity:0;fill:#fff;filter:drop-shadow(0 1cqw 3cqw rgba(0,0,0,.35))}
.ip-licht .ip-hart{fill:#ff3040}
.ip-golf{position:absolute;z-index:22;width:15cqw;height:15cqw;margin:-7.5cqw 0 0 -7.5cqw;border-radius:50%;border:.6cqw solid rgba(255,255,255,.7);opacity:0;pointer-events:none}
.ip-licht .ip-golf{border-color:rgba(30,30,30,.35)}
/* de inhoud die meebeweegt met het gebaar */
.ip-inh{position:absolute;inset:0}

/* veeg omhoog (reels / tiktok): vinger trekt, inhoud volgt een stukje en veert terug */
[data-gebaar=veeg] .ip-vinger{animation:ip-veeg-v 6.5s cubic-bezier(.45,0,.2,1) infinite}
[data-gebaar=veeg] .ip-inh>*:not(.nav):not(.ip-vast){animation:ip-veeg-i 6.5s cubic-bezier(.45,0,.2,1) infinite}
@keyframes ip-veeg-v{0%,52%{opacity:0;transform:translate(50cqw,150cqw) scale(1.25)}
  56%{opacity:1;transform:translate(50cqw,150cqw) scale(1)}74%{opacity:1;transform:translate(52cqw,70cqw) scale(1)}80%,100%{opacity:0;transform:translate(52cqw,58cqw) scale(1.2)}}
@keyframes ip-veeg-i{0%,56%{transform:none}74%{transform:translateY(-30cqw)}84%,100%{transform:none}}

/* dubbel tikken: hartje */
[data-gebaar=tik2] .ip-vinger{animation:ip-tik2-v 6s ease infinite}
[data-gebaar=tik2] .ip-hart{animation:ip-hart 6s ease infinite}
[data-gebaar=tik2] .ip-golf{left:58%;top:52%;animation:ip-golf2 6s ease-out infinite}
@keyframes ip-tik2-v{0%,58%{opacity:0;transform:translate(58cqw,113cqw) scale(1.3)}
  60%{opacity:1;transform:translate(58cqw,113cqw) scale(1)}62%{transform:translate(58cqw,113cqw) scale(.82)}64%{transform:translate(58cqw,113cqw) scale(1)}
  66%{transform:translate(58cqw,113cqw) scale(.82)}69%{opacity:1;transform:translate(58cqw,113cqw) scale(1)}75%,100%{opacity:0;transform:translate(58cqw,113cqw) scale(1.25)}}
@keyframes ip-hart{0%,65%{opacity:0;transform:scale(.2)}69%{opacity:1;transform:scale(1.12)}72%{transform:scale(.95)}80%{opacity:1;transform:scale(1)}88%,100%{opacity:0;transform:scale(1) translateY(-10%)}}
@keyframes ip-golf2{0%,60%{opacity:0;transform:scale(.6)}62%{opacity:.9}72%,100%{opacity:0;transform:scale(2.4)}}

/* tik rechts (story: volgende) */
[data-gebaar=tikr] .ip-vinger{animation:ip-tikr-v 5s ease infinite}
[data-gebaar=tikr] .ip-golf{left:80%;top:48%;animation:ip-golfr 5s ease-out infinite}
[data-gebaar=tikr] .ip-inh{animation:ip-flits 5s ease infinite}
@keyframes ip-tikr-v{0%,62%{opacity:0;transform:translate(80cqw,104cqw) scale(1.3)}66%{opacity:1;transform:translate(80cqw,104cqw) scale(1)}
  69%{transform:translate(80cqw,104cqw) scale(.8)}72%{opacity:1;transform:translate(80cqw,104cqw) scale(1)}80%,100%{opacity:0;transform:translate(80cqw,104cqw) scale(1.25)}}
@keyframes ip-golfr{0%,68%{opacity:0;transform:scale(.6)}70%{opacity:.9}82%,100%{opacity:0;transform:scale(2.4)}}
@keyframes ip-flits{0%,69%{filter:none}71%{filter:brightness(.82)}76%,100%{filter:none}}

/* scrollen door de feed (post) */
[data-gebaar=scroll] .ip-vinger{animation:ip-scr-v 7s cubic-bezier(.45,0,.2,1) infinite}
[data-gebaar=scroll] .ip-inh{animation:ip-scr-i 7s cubic-bezier(.45,0,.2,1) infinite}
@keyframes ip-scr-v{0%,40%{opacity:0;transform:translate(62cqw,160cqw) scale(1.3)}44%{opacity:1;transform:translate(62cqw,160cqw) scale(1)}
  60%{opacity:1;transform:translate(60cqw,112cqw) scale(1)}66%,100%{opacity:0;transform:translate(60cqw,104cqw) scale(1.2)}}
@keyframes ip-scr-i{0%,44%{transform:none}60%,82%{transform:translateY(-9%)}94%,100%{transform:none}}

@media (prefers-reduced-motion:reduce){.ip-vinger,.ip-hart,.ip-golf{display:none}.ip-inh,[data-gebaar] .ip-inh>*{animation:none!important}}
.ip-uit .ip-vinger,.ip-uit .ip-hart,.ip-uit .ip-golf,.ip-uit .ip-inh,.ip-uit .ip-inh>*{animation-play-state:paused!important}