/* ============================================
   ODZRESHOP — Collage Layout (Mockup Canvas)
   ============================================ */

.collage-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #EDE9FE 0%, #DDD3F8 34%, #C4B5FD 72%, #A78BFA 100%);
}

.collage-canvas {
  position: relative;
  width: 1560px;
  height: 1150px;
  flex: none;
  transform-origin: center center;
}

/* ---------- Bokeh / Glassmorphism background ---------- */
.bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  pointer-events: none;
}
.bk1 { width: 480px; height: 480px; top: -140px; left: -120px;  background: rgba(255,255,255,.55); }
.bk2 { width: 380px; height: 380px; top: 340px;  left: 180px;   background: rgba(124,58,237,.30); }
.bk3 { width: 520px; height: 520px; bottom: -180px; left: 420px; background: rgba(255,255,255,.42); }
.bk4 { width: 420px; height: 420px; top: -120px; right: 120px;  background: rgba(139,92,246,.38); }
.bk5 { width: 300px; height: 300px; bottom: 40px; right: -80px; background: rgba(255,255,255,.50); }
.bk6 { width: 220px; height: 220px; top: 430px; right: 330px;   background: rgba(196,181,253,.65); }

.glass-shape {
  position: absolute;
  border-radius: 24px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.gs1 { width: 260px; height: 260px; top: 90px;  right: 60px;  transform: rotate(14deg); }
.gs2 { width: 180px; height: 180px; bottom: 130px; left: 130px; transform: rotate(-12deg); }

/* ---------- Screen frames ---------- */
.screen {
  position: absolute;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: #fff;
}
.screen::after { /* soft screen glare */
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 26%);
  pointer-events: none;
}

.screen-inner { transform-origin: top left; }

/* Landing — kiri (besar) */
.screen-landing {
  left: 40px; top: 104px;
  width: 760px; height: 1000px;
  z-index: 1;
}
.screen-landing .screen-inner { width: 1240px; transform: scale(0.6129); } /* 760 / 1240 */

/* Login — kanan atas (modal mengambang) */
.screen-login {
  left: 812px; top: 8px;
  width: 700px; height: 560px;
  z-index: 3;
  background:
    radial-gradient(120% 130% at 12% 8%, rgba(124,58,237,.38) 0%, rgba(124,58,237,0) 55%),
    linear-gradient(150deg, #EFE9FE 0%, #D9CDFB 48%, #BBA7F6 100%);
}
.screen-login::after {
  background: linear-gradient(115deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 30%);
}
.screen-login .screen-inner { width: 700px; height: 560px; transform: scale(1); }

/* Dashboard — kanan bawah */
.screen-dashboard {
  left: 706px; top: 552px;
  width: 814px; height: 590px;
  z-index: 2;
}
.screen-dashboard .screen-inner { width: 1300px; transform: scale(0.6262); } /* 814 / 1300 */