.frame {
    display: inline-block;
}

.frame-top,
.frame-bottom {
    display: flex;
}

.frame-middle {
    display: flex;
}

.frame-corner {
    width: 32px;
    height: 32px;
    background-size: cover;
}

    /* Köşe görselleri */
    .frame-corner.tl {
        background-image: url('/Data/images/frames/frame_corner.png');
        transform: rotate(0deg);
    }

    .frame-corner.tr {
        background-image: url('/Data/images/frames/frame_corner.png');
        transform: rotate(90deg);
    }

    .frame-corner.br {
        background-image: url('/Data/images/frames/frame_corner.png');
        transform: rotate(180deg);
    }

    .frame-corner.bl {
        background-image: url('/Data/images/frames/frame_corner.png');
        transform: rotate(270deg);
    }

/* Yatay kenar */
.frame-edge.horizontal {
    background-image: url('/Data/images/frames/frame_tile_horizontal.png');
    background-repeat: repeat-x;
    background-position: center center; /* EKLENDİ */
    background-size: auto 100%; /* Yüksekliği div'e göre ayarlar */
    height: 32px;
    flex-grow: 1;
}

/* Dikey kenar */
.frame-edge.vertical {
    background-image: url('/Data/images/frames/frame_tile_vertical.png');
    background-repeat: repeat-y;
    background-position: center center; /* Ortalamak için */
    background-size: 100% auto; /* Genişlik: div'e sığacak şekilde */
    width: 32px; /* veya görselin genişliği */
}

.frame-edge.left {
    order: 1;
}

.frame-content {
    order: 2;
    padding: 10px;
    /*background: rgba(255, 255, 255, 0.7); /* yarı saydam beyaz */
        flex-grow: 1;
}

.frame-edge.right {
    order: 3;
}