/**
 * Frontend mockup composite engine (laptop / phone / tablet)
 * Admin ui-mockup-composite.css ile aynı katman mantığı; frontend path.
 *
 * Katman: .inner z-index 2 (ekran slotu) → .device-frame z-index 3 (PNG çerçeve)
 */

:root {
    --mc-laptop-top:  1.7%;
    --mc-laptop-left: 8%;
    --mc-laptop-w:    84.2%;
    --mc-laptop-h:    89.3%;
    --mc-laptop-r:    5px;

    --mc-phone-top:  2.2%;
    --mc-phone-left: 4.9%;
    --mc-phone-w:    88.8%;
    --mc-phone-h:    95.9%;
    --mc-phone-r:    5px;

    --mc-tablet-top:  4%;
    --mc-tablet-left: 6.5%;
    --mc-tablet-w:    87%;
    --mc-tablet-h:    88%;
    --mc-tablet-r:    10px;
}

.home-mockup-composite {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    line-height: 0;
    isolation: isolate;
}

.computer-box,
.phone-box,
.tablet-box {
    position: relative;
    display: block;
    line-height: 0;
    isolation: isolate;
}

.computer-box {
    flex: 1 1 auto;
    min-width: 0;
}

.phone-box {
    flex: 0 0 auto;
    width: clamp(110px, 22%, 160px);
}

.tablet-box {
    flex: 0 0 auto;
    width: clamp(180px, 30%, 280px);
}

.inner {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    background: color-mix(in srgb, var(--site-text) 88%, var(--site-bg));
}

.device-frame {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 3;
    pointer-events: none;
    user-select: none;
}

.computer-box .inner {
    top:           var(--mc-top,  var(--mc-laptop-top));
    left:          var(--mc-left, var(--mc-laptop-left));
    width:         var(--mc-w,    var(--mc-laptop-w));
    height:        var(--mc-h,    var(--mc-laptop-h));
    border-radius: var(--mc-r,    var(--mc-laptop-r));
}

.phone-box .inner {
    top:           var(--mc-top,  var(--mc-phone-top));
    left:          var(--mc-left, var(--mc-phone-left));
    width:         var(--mc-w,    var(--mc-phone-w));
    height:        var(--mc-h,    var(--mc-phone-h));
    border-radius: var(--mc-r,    var(--mc-phone-r));
}

.tablet-box .inner {
    top:           var(--mc-top,  var(--mc-tablet-top));
    left:          var(--mc-left, var(--mc-tablet-left));
    width:         var(--mc-w,    var(--mc-tablet-w));
    height:        var(--mc-h,    var(--mc-tablet-h));
    border-radius: var(--mc-r,    var(--mc-tablet-r));
}

/* Şablon ekran alanı varsa CSS fallback devre dışı */
.home-mockup-device[data-mc-top] .inner {
    top:           var(--mc-top);
    left:          var(--mc-left);
    width:         var(--mc-w);
    height:        var(--mc-h);
    border-radius: var(--mc-r);
}

.inner.inner--perspective {
    border-radius: 0;
    clip-path: var(--mc-clip);
    -webkit-clip-path: var(--mc-clip);
    overflow: hidden;
}

.home-mockup-device .inner {
    position: absolute;
    overflow: hidden;
}

.home-mockup-device .inner.inner--perspective {
    border-radius: 0;
    clip-path: var(--mc-clip);
    -webkit-clip-path: var(--mc-clip);
}

.home-mockup-device .mockup-screen-media,
.home-mockup-device .screen-media,
.home-mockup-device video,
.home-mockup-device iframe,
.home-mockup-device img[data-mockup-screen-image] {
    width: 100%;
    height: 100%;
    object-fit: var(--mc-fit, cover);
    object-position: var(--mc-position, top center);
    transform: none;
    clip-path: none;
    -webkit-clip-path: none;
}

.home-mockup-device .inner .mockup-screen-media,
.home-mockup-device .inner .home-hero__media-stack {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.home-mockup-device .inner .mockup-screen-media__video,
.home-mockup-device .inner .mockup-screen-media__image,
.home-mockup-device .inner .screen-media,
.home-mockup-device .inner .home-hero__media--poster,
.home-mockup-device .inner .home-hero__media--video {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--mc-fit, cover);
    object-position: var(--mc-position, top center) !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.home-mockup-device .inner .mockup-screen-media__youtube,
.home-mockup-device .inner .mockup-screen-media__youtube iframe {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

.home-mockup-device .inner .mockup-screen-media__youtube iframe {
    display: block;
    border: 0;
}

.home-mockup-device[data-mc-mode="perspective"] .inner.inner--perspective {
    border-radius: 0;
}

.screen-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--mc-fit, cover);
    object-position: var(--mc-position, top center);
}

.mockup-screen-media {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.mockup-screen-media__youtube {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mockup-screen-media__youtube iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.mockup-screen-media__video,
.mockup-screen-media__image {
    width: 100%;
    height: 100%;
    object-fit: var(--mc-fit, cover);
    object-position: var(--mc-position, top center);
}

@media (max-width: 640px) {
    .home-mockup-composite {
        flex-direction: column;
        align-items: center;
    }

    .phone-box {
        width: clamp(100px, 45%, 140px);
    }
}