/* KakoSi? — okvir telefona za mockupe
   <div class="phone" style="--s:.72"><div class="phone-body"><iframe …></iframe><span class="island"></span></div></div>
   --s je mjerilo; zaslon unutra je uvijek 393 × 852. */

.phone { --s: 1; position: relative; flex: none; width: calc(417px * var(--s)); height: calc(876px * var(--s)); }
.phone-body {
  position: absolute; top: 0; left: 0; width: 417px; height: 876px; padding: 12px;
  transform: scale(var(--s)); transform-origin: 0 0;
  border-radius: 68px; background: #090B09;
  box-shadow:
    0 0 0 1.5px #2F342E,
    0 0 0 4px #8B9288,
    0 0 0 5px #3B4039,
    0 60px 100px -36px rgba(15, 36, 9, .6),
    0 28px 44px -26px rgba(15, 36, 9, .5);
}
.phone iframe { display: block; width: 393px; height: 852px; border: 0; border-radius: 56px; background: #323F2D; }
.phone .island {
  position: absolute; top: 23px; left: 50%; width: 124px; height: 36px; margin-left: -62px;
  border-radius: 20px; background: #000; pointer-events: none;
}
/* Bočne tipke */
.phone-body::before, .phone-body::after { content: ""; position: absolute; width: 4px; border-radius: 2px; }
.phone-body::before {
  left: -8px; top: 152px; height: 186px;
  background: linear-gradient(#7C837A 0 30px, transparent 30px 62px, #7C837A 62px 118px, transparent 118px 130px, #7C837A 130px 186px);
}
.phone-body::after { right: -8px; top: 248px; height: 92px; background: #7C837A; }