/* Genel stili */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    overflow: hidden; /* Overflow'u tamamen engelle */
}

/* Üst bar */
.ui.menu.top-bar {
    height: 70px; /* Üst barın yüksekliği */
    background-color: #333; /* Arka plan rengi */
    z-index: 100;
    position: fixed;
    top: 0;
    width: 100%;
}

/* Yazı rengi ve kalınlığı */
.ui.menu.top-bar .header.item,
.ui.menu.top-bar .item {
    color: white !important; /* Beyaz yazı rengi */
    font-weight: bold; /* Yazı kalınlığı */
}

/* İçerik alanı */
.video-chat-section {
    margin-top: 70px; /* Üst barın yüksekliği kadar boşluk bırakıldı */
    height: calc(100vh - 120px); /* Üst bar ve alt barın yüksekliği çıkarıldı */
    display: flex; /* Flex ile yan yana hizalama */
    overflow: hidden; /* İçerik alanında overflow'u engelle */
}

/* Sol taraftaki video alanı */
.video-container {
    width: 75%; /* Sol alan %75 genişliğinde */
    background-color: black; /* Arka plan rengi */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Video alanında overflow'u engelle */
}

#remoteVideo {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* Sol alttaki küçük video */
.local-video {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 150px;
    height: 100px;
    border: 2px solid white;
    border-radius: 8px;
}

#localVideo {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* Sağdaki chat alanı */
.chat-container {
    width: 25%; /* Sağ alan %25 genişliğinde */
    height: 100%; /* Tam yükseklik */
}

.chat-segment {
    height: 100%; /* Tam yüksekliği kaplasın */
    display: flex;
    flex-direction: column; /* Alt öğeleri dikey hizala */
}

/* Chat mesajları */
.chat-messages {
    flex-grow: 1; /* Mesaj alanı mümkün olduğunca genişlesin */
    overflow-y: auto; /* Taşarsa kaydırma çubuğu ekle */
}

/* Separator stili */
.separator {
    margin: 0 10px; /* Sol ve sağda 10px boşluk bırak */
    color: white; /* Rengi beyaz yap */
}

/* Alt bar */
.ui.menu.bottom-bar {
    height: 50px; /* Alt barın yüksekliği */
    background-color: #333; /* Arka plan rengi */
    color: white; /* Yazı rengi */
    z-index: 100;
    position: fixed;
    bottom: 0; /* Sayfanın dibine sabitle */
    width: 100%;
}

/* Alt bardaki öğelerin stilini güncelle */
.ui.menu.bottom-bar .item {
    color: white; /* Beyaz yazı rengi */
    font-weight: bold; /* Yazı kalınlığı */
}

/* Alt bar buton stili */
#startCallBtn, #nextBtn {
    margin: 0 20px; /* Sağdan ve soldan boşluk bırak */
}

/* Semantic UI stil çakışmalarını önlemek için */
.ui.menu {
    margin: 0 !important; /* Varsayılan margin'leri sıfırla */
    padding: 0 !important; /* Varsayılan padding'leri sıfırla */
    border-radius: 0 !important;
}