/**
 * Referans cihaz sahnesi — liste: laptop + oransal sağ-alt telefon; detay: yalnızca laptop
 * Tek Device Composition koordinat sistemi (CSS-driven, zero JS resize dependency).
 */
.ref-device-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.ref-device-stage__laptop,
.ref-device-stage__phone,
.ref-device-stage__tablet {
    position: absolute;
    transition: transform 0.3s ease;
}

.ref-device-stage__laptop .computer-box,
.ref-device-stage__phone .phone-box,
.ref-device-stage__tablet .tablet-box {
    position: relative;
    width: 100%;
}

.ref-device-stage__laptop .device-frame,
.ref-device-stage__phone .device-frame,
.ref-device-stage__tablet .device-frame {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* Liste kartı — Tek Device Composition Box */
.ref-device-stage--card {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    aspect-ratio: 16 / 10.5;
    min-height: auto;
}

/* Laptop — composition box'ın sol-alt tabanına oturur */
.ref-device-stage--card .ref-device-stage__laptop {
    left: 0;
    right: auto;
    bottom: 0;
    top: auto;
    width: 88%;
    max-width: 100%;
    transform: none;
    z-index: 2;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}

/* Telefon — aynı composition box'a göre oransal olarak sağ-alt köşede kilitlenir */
.ref-device-stage--card .ref-device-stage__phone {
    left: auto;
    right: 2%;
    bottom: 0;
    top: auto !important;
    width: 22%;
    max-width: 120px;
    transform: none !important;
    z-index: 5;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.5));
}

/* Tablet — liste kartında laptopun sol-alt tarafında */
.ref-device-stage--card .ref-device-stage__tablet {
    left: -2%;
    right: auto;
    bottom: 0;
    top: auto !important;
    width: 36%;
    max-width: 200px;
    transform: none !important;
    z-index: 4;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.5));
}

/* Detay hero — yalnızca laptop */
.ref-device-stage--hero {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 16 / 10;
    min-height: clamp(280px, 36vw, 520px);
}

.ref-device-stage--hero .ref-device-stage__laptop {
    left: 50%;
    bottom: 0;
    width: 92%;
    transform: translateX(-50%);
    z-index: 2;
    filter: drop-shadow(0 32px 56px rgba(0, 0, 0, 0.48));
}

.ref-device-stage--hero .ref-device-stage__phone,
.ref-device-stage--hero .ref-device-stage__tablet {
    display: none !important;
}

/* Kart hover mikro-animasyonu */
.refs-card__media:hover .ref-device-stage--card .ref-device-stage__laptop {
    transform: translateY(-4px);
}

.refs-card__media:hover .ref-device-stage--card .ref-device-stage__phone {
    transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
    .ref-device-stage__laptop,
    .ref-device-stage__phone,
    .ref-device-stage__tablet,
    .refs-card__media:hover .ref-device-stage--card .ref-device-stage__laptop,
    .refs-card__media:hover .ref-device-stage--card .ref-device-stage__phone {
        transition: none;
        transform: none !important;
    }
}