/* Shorts için kare/vertical görünüme uygun stil */
.short-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px; /* Daha dar görünüm */
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    overflow: hidden;
}

.short-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
form {
    margin: 0;
    padding: 0;
    display: flex; /* Veya parent div'inize uygun başka bir düzenleme */
    width: 100%; /* Formun genişliğini kontrol etmek için */
}
 
  .post-container {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            padding: 20px;
        }

        .post-input {
            display: flex;
            align-items: center;
            background: #f0f2f5;
            border: 1px solid #ddd;
            border-radius: 25px;
            padding: 10px 15px;
            transition: border-color 0.2s;
        }

        .post-input:hover,
        .post-input:focus-within {
            border-color: #1877f2;
        }

        .post-input .emoji {
            font-size: 20px;
            margin-right: 10px;
        }

        .post-input textarea {
            border: none;
            outline: none;
            background: none;
            font-size: 16px;
            flex: 1;
            resize: none;
            overflow: hidden;
            line-height: 1.5;
        }

        .post-input textarea:focus {
            height: auto;
        }

.post-button {
    background-color: #ff0000;
    color: #fff;
    border: none;
    border-radius: 50%; /* Daire buton */
    width: 40px; /* Buton geniÅŸliÄŸi */
    height: 40px; /* Buton yüksekliği */
    display: flex; /* Flex düzenleme */
    justify-content: center; /* Yatay ortalama */
    align-items: center; /* Dikey ortalama */
    cursor: pointer;
    margin-left: 10px;
    transition: background-color 0.2s;
}

.post-button:hover {
    background-color: #cc0000;
}

.post-button svg {
    fill: #fff;
    width: 30px; /* SVG geniÅŸlik */
    height: 30px; /* SVG yükseklik */
    transform: rotate(90deg); /* Ok simgesini döndür */
    display: block; /* Merkezi hizalama */
}




.og-title, .og-image, .og-description, .video-container, .image-container {
    max-width: 100%;
    word-wrap: break-word;
    overflow: hidden;
}
.og-title {
    font-weight: bold;
}

    .post-container {
        max-width: 100%; /* İçeriğin div'in maksimum genişliğine sığmasını sağlar */
        overflow: hidden; /* İçeriğin taşmasını önler */
    }

   .video-container {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

/* Klasik yatay YouTube videoları (16:9) */
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

    .video-container iframe {
        position: absolute; /* İframe'i pozisyonlamak için */
        top: 0; /* Ãœst kenardan baÅŸlayacak ÅŸekilde */
        left: 0; /* Sol kenardan baÅŸlayacak ÅŸekilde */
        width: 100%; /* GeniÅŸlik %100 olacak ÅŸekilde */
        height: 100%; /* Yükseklik %100 olacak şekilde */
    }

    .image-container {
        max-width: 100%; /* Görselin genişliğini %100 olarak ayarlar */
    }
	
.woooq-video {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9; /* Otomatik oran koruma */
  overflow: hidden;
}

.woooq-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
    .image-container img {
        width: 100%; /* Görselin genişliğini %100 olarak ayarlar */
        height: auto; /* Yüksekliği otomatik olarak ayarlar, en boy oranını korur */
        display: block; /* Blok element yapar, altındaki boşluğu kaldırır */
    }
	
	
.ig-live {
    position: relative; /* Metnin konumlandırılması için */
    width: 100px;
    height: 100px;
    border: 3px solid red; /* Kırmızı sınır */
    border-radius: 50%; /* Yuvarlak köşeler */
    overflow: hidden; /* İçeriğin sınırlarının dışına çıkmasını engeller */
    display: flex;
    justify-content: center;

}



.uye-class {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uye-class img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ig-live::after {
    content: 'CANLI';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 6px;
    background-color: red; /* Arka plan rengi */
    color: white; /* Metin rengi */
    font-size: 10px; /* Metin boyutu */
    border-radius: 3px; /* Köşe yuvarlama */

    /* Animasyon */
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% {
        opacity: 0;
    }
    51%, 100% {
        opacity: 1;
    }
}