@media (max-width: 1023px) {
    body {
        margin: 0;
        padding: 0;
        background: linear-gradient(135deg, #ff9ec7, #ffb3d1, #ffc7db, #ffdbe5) !important;
        min-height: 100vh;
        overflow-x: hidden;
        width: 100%;
    }

    .container,
    .main-content,
    .surprise-content,
    .surprise-card,
    .timeline-container {
        background: transparent !important;
    }

    .timeline-item.photo-item {
        margin: 4px auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 600px !important;
        box-sizing: border-box !important;
        position: relative !important;
        height: auto !important;
        z-index: 5 !important;
        display: block !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .photo-container {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 2px auto !important;
        position: relative !important;
        background: transparent !important;
        display: inline-block !important;
        vertical-align: top !important;
        aspect-ratio: var(--photo-aspect-ratio, 1);
        max-height: 250px !important;
        box-shadow: none !important;
        border: none !important;
    }

    .photo-container img,
.photo-container .surprise-photo {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
}


    .photo-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 4px !important; /* YATAY ve DİKEY boşluk azaltıldı */
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
        position: relative !important;
        background: transparent !important;
    }

    /* Dinamik boyutlara göre oranlar */
    .photo-container.landscape {
        aspect-ratio: 16/9;
        max-width: 100%;
    }
    .photo-container.portrait {
        aspect-ratio: 3 / 4;
        width: auto !important;
        max-width: 80% !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 5px auto !important;
        background: transparent !important;
        position: relative !important;
        display: block !important;
        box-shadow: none !important;
        border: none !important;
        line-height: 0 !important;
    }

    .photo-container.square {
        aspect-ratio: 1/1;
        max-width: 60%;
    }
    
    .message-text {
        font-family: 'Bitcount Single Ink', cursive !important;
        color: white !important;
        line-height: 1.8 !important;
        font-size: 16px !important;
        text-align: center !important;
        font-style: italic !important;
        font-weight: 500 !important;
        position: relative !important;
        z-index: 1 !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
}