/* Restoran panel GIF bilgisayarı */

.restaurant-site .r-panel-computer {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 600px;
    justify-self: end;
    margin: 0 0 76px;
    padding: 14px 14px 43px;

    background: linear-gradient(
        180deg,
        #eef0f1 0%,
        #d5d8da 60%,
        #b9bec2 100%
    );

    border: 1px solid #92989d;
    border-radius: 18px;
    box-shadow:
        0 30px 65px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.restaurant-site .r-panel-screen {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 2px solid #0b0e12;
    border-radius: 9px 9px 5px 5px;
    background: #f3f5f8;
}

.restaurant-site .r-panel-screen img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

/* Ekranın üstündeki kamera */
.restaurant-site .r-panel-camera {
    position: absolute;
    top: 6px;
    left: 50%;
    z-index: 4;
    width: 5px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #171a1d;
    box-shadow:
        0 0 0 1px #777d82,
        0 1px 2px rgba(0, 0, 0, .5);
}

/* Alüminyum bilgisayar ayağı ve tabanı */
.restaurant-site .r-panel-stand {
    position: absolute;
    left: 50%;
    bottom: -73px;
    z-index: 0;
    width: 240px;
    height: 75px;
    transform: translateX(-50%);

    background:
        linear-gradient(180deg, #9ca2a7, #d3d6d8)
        center bottom / 240px 10px no-repeat,

        linear-gradient(
            102deg,
            transparent 17%,
            #cfd3d5 18%,
            #abb1b6 82%,
            transparent 83%
        )
        center top / 136px 68px no-repeat;

    border-radius: 0 0 10px 10px;
    filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .24));
}

/* Tablet */
@media (max-width: 1040px) {
    .restaurant-site .r-panel-computer {
        max-width: 680px;
        justify-self: start;
    }
}

/* Telefon */
@media (max-width: 700px) {
    .restaurant-site .r-panel-computer {
        padding: 9px 9px 32px;
        margin-bottom: 61px;
        border-radius: 13px;
    }

    .restaurant-site .r-panel-screen {
        border-radius: 6px 6px 4px 4px;
    }

    .restaurant-site .r-panel-camera {
        top: 3px;
        width: 4px;
        height: 4px;
    }

    .restaurant-site .r-panel-stand {
        bottom: -72px;
        transform: translateX(-50%) scale(.82);
        transform-origin: center top;
    }
}