<div class="tabs">
       
       <ul>
           <li>Buton 1</li>
           <li>Buton 2</li>
        </ul>
       
       <div class="tabcontent">
            <div class="tab"> <!-- zeynep - kardeş tab -->
                    <div class="tabs">
                        <ul>
                           <li>Buton 1</li>
                           <li>Buton 2</li>
                        </ul>
                        
                        <div class="tabcontent">
                            <div class="tab"></div> <!-- fatma - kardeş tab --><!--Bu seçilmesin-->
                            <div class="tab"></div> <!-- fatma - kardeş tab --><!--fBu da seçilmesin-->
                        </div>
                    <div/>
            </div> 
            <div class="tab"></div><!-- zeynep - kardeş tab -->
        </div>
        
        
    </div>

    let tabs = document.getElementsByClassName("tabs");
    for (let i = 0; i < tabs.length; i++) {
    
        let butons = tabs[i].querySelectorAll(".tablinks");
    
        for (let i = 0; i < butons.length; i++) {
            
            butons[a].addEventListener("click", (e) =>{
            
                    let parentTabs = e.target.closest(".tabs");
                    let parentTabs = parentTabs.querySelectorAll(".tab");
                    //Burada içerideki butonlarda sorun yok ama
                    //en üstteki butonlara tıklayınca bütün tab lar seçiliyor.
            });
        }
    
    }