/* Random Image Styles - Izole edilmiş CSS */
.random-image-wrapper {
    margin: 2rem auto;
    display: block;
    max-width: 100%;
    overflow: hidden;
}

.random-image-wrapper.float-left {
    text-align: left;
}

.random-image-wrapper.float-right {
    text-align: right;
}

.random-image-wrapper.float-center {
    text-align: center;
}

.random-image {
    display: inline-block;
    height: auto;
    vertical-align: middle;
    filter: brightness(0);
    mix-blend-mode: multiply;
    max-width: 100%;
}

/* Mobile'de float'ları kaldır */
@media (max-width: 768px) {
    .random-image-wrapper.float-left,
    .random-image-wrapper.float-right {
        text-align: center;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .random-image {
        max-width: 90%;
    }
}

.dark-mode .random-image {
    filter: brightness(0) invert(1);
    mix-blend-mode: screen;
}