/* Mockup desktop + tablet + mobile untuk halaman Portofolio */
.pf-mockup{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:linear-gradient(160deg,#EEF2F6,#C9D3DF)}
.pf-mockup img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.pf-dev{position:absolute;background:#101418;box-shadow:0 18px 34px rgba(11,31,51,.3)}
.pf-dev>span{display:block;width:100%;height:100%;overflow:hidden;background:#fff}

/* Desktop / laptop */
.pf-desktop{left:4%;top:10%;width:70%;aspect-ratio:16/10;padding:clamp(4px,1.2%,12px) clamp(4px,1.2%,12px) clamp(6px,1.6%,14px);border-radius:8px 8px 3px 3px;box-sizing:border-box}
.pf-desktop>span{border-radius:3px}
.pf-desktop::after{content:"";position:absolute;left:-6%;bottom:-5%;width:112%;height:5%;border-radius:0 0 40px 40px;background:linear-gradient(#B8C0CA,#8E98A5)}

/* Tablet (portrait) */
.pf-tablet{left:62%;top:28%;width:24%;aspect-ratio:3/4;padding:clamp(5px,2%,14px);border-radius:12px;box-sizing:border-box}
.pf-tablet>span{border-radius:6px}

/* Mobile */
.pf-mobile{left:82%;top:40%;width:13%;aspect-ratio:9/19;padding:clamp(3px,1.2%,8px);border-radius:16px;box-sizing:border-box}
.pf-mobile>span{border-radius:11px}

/* Tanpa tablet: desktop + mobile */
.pf-mockup--no-tablet .pf-desktop{left:12%;width:68%}
.pf-mockup--no-tablet .pf-mobile{left:74%;top:34%}
/* Tanpa mobile: desktop + tablet */
.pf-mockup--no-mobile .pf-desktop{left:12%;width:68%}
.pf-mockup--no-mobile .pf-tablet{left:66%}
/* Hanya desktop */
.pf-mockup--no-tablet.pf-mockup--no-mobile .pf-desktop{left:15%;width:70%}

@media (max-width:575px){
  .pf-dev{box-shadow:0 8px 16px rgba(11,31,51,.3)}
  .pf-mobile{border-radius:10px}
  .pf-tablet{border-radius:8px}
}
.pf-mockup-link{display:block}